HTML实现banner图切换
生活随笔
收集整理的这篇文章主要介绍了
HTML实现banner图切换
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
首先呢，我们做出来的效果去下图，这里只是简单的写的文字，如果需要更好的话，可以自己添加或修改。（这里图片大小没有统一，有一丢丢影响效果）
接下来我们来看看详细的代码
HTML部分：
这里主要设置了三个盒子并列。一个存放banner图、一个是左侧的黑色背景还有一个是左侧的文字。（因为这里是设置了黑色盒子的背景透明度，为了实现背景透明、文字不透明，所以这里用的是两个盒子通过设置位置来实现的。）
存放文字的盒子里面设置了若干个盒子，开始下他的排列布局。
代码：
<body><div id="banner"></div><div class="list"></div><div class="text"><div οnmοuseοver="pic(0)">HUAWEI P40系列</div><div οnmοuseοver="pic(1)">nova 7 Pro</div><div οnmοuseοver="pic(2)">华为 畅享10</div><div οnmοuseοver="pic(3)">HUAWEI Mate30 系列</div><div οnmοuseοver="pic(4)">nova 6</div><div οnmοuseοver="pic(5)">华为智慧屏</div><div οnmοuseοver="pic(6)">智慧进阶 新品盛典</div><div οnmοuseοver="pic(7)">华为路由AX3 | AX3 Pro</div><div οnmοuseοver="pic(8)">HUAWEI WATCH GT2e</div><div οnmοuseοver="pic(9)">HUAWEI MatePad</div></div></body>CSS部分：
css就主要是设置了一些基本的样式。
代码：
//设置banner图 #banner{width: 100%;height: 700px;background: url(img/1.png) no-repeat;background-size: contain; } //背景盒子和存放文字的盒子 .list,.text{position: absolute;right: 5%;width: 20%;height: 700px;margin-top: -700px; } .list{background-color: black;filter: opacity(0.6); } //设置文字的的样式 .text div{width: 100%;height: 70px;text-align: center;font-size: 15px;line-height: 70px; } //设置鼠标悬停在存放文字盒子时的样式 .text div:hover{color: white;font-size: 25px;line-height: 70px;background-color: #000000; }JS部分：
前面我们就把基本样式设置好了，这一部分就是来设置当鼠标悬停在对应的文字div上就显示相应的图片。
代码：
//获取banner元素 var a =document.getElementById('banner'); //定义图片的路径，存放到数组 var url=[ 'url(img/1.png)','url(img/2.png)','url(img/3.png)','url(img/4.png)','url(img/5.png)', 'url(img/6.png)','url(img/7.png)','url(img/8.png)','url(img/9.png)','url(img/10.png)',];//定义显示函数 function pic(index){//通过循环和判断语句，如果传过来的参数和i对应，那么久吧数组的第i个值赋值给banner的背景图片属性。for(var i=0;i<10;i++){if(i==index){a.style.backgroundImage=url[i];}} }到这里我们就完成了上面图片中的效果。
总结
以上是生活随笔为你收集整理的HTML实现banner图切换的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 翟佳：高可用、强一致、低延迟——Book
- 下一篇： 前端学习之路---node.js（二）