各位亲爱的伙伴们
大家周末愉快
上次给大家写了
给猫猫制作简单的轮播图
收到了，小伙伴们一致吐槽，娜娜制作出来的这个轮播图不能动呀~。好吧说实话，那个本来就动不了。但是伙伴们的建议，我都收到了，那么今天我们来制作一个，可以自己动的轮播图——某电商网站的轮播图制作。
制作网站的轮播图
第一步：
准备素材，毕竟是要做一个电商网站的轮播图，不能像上次一样随便弄点猫猫图片就上去了，看到咱们高大上的效果图了吗？
里面的每一张图片，都是娜娜精心在网上挑选的，毕竟娜娜的设计水平有限，做不出来这么高大上的图片。
第二步：
图片素材准备完毕，咱们来开始编代码~
首先还是页面的布局：
通过效果图我们可以看到：整个 banner 是一个模块，里面有三个子模块图片 pic，左右点击的按钮 btn，和小面的6个小按钮。代码就像下面这个样子。
布局完成之后，下面我们来补充样式：
好的，我们的布局和样式都写完了，页面就是下面的效果了。
现在我们来写 JS 代码，记得要导入jQuery的包呦~
当我们的鼠标划入的时候，更换图片图片，更换按钮的背景色~
这段代码实现的功能是，当我们的鼠标移动到主图上或者按钮上时，显示按钮。其他时候隐藏按钮（btn）。
当我们点击两边的 btn 时触发这个事件，轮播图会变换。
接下来设置自动轮播，并且调用这个函数。
最后一个功能，当我们的鼠标滑动上去的时候图片停止不动。
效果：
好的今天就到这里了
完整代码奉上
Title
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;color: inherit;}
img{display: block;border:none;}
ol,ul{list-style:none;}
#banner{width:730px; height:454px; margin:50px auto; position:relative;}
#banner .pic{width:730px; height:454px; position:relative;}
#banner .pic ul li{width:730px; height:454px; position:absolute; top:0;left:0; list-style:none; display:none;}
#banner .tab{width:160px; height:20px; position:absolute; left:calc(50% - 78px); bottom:10px;}
#banner .tab ul li{width:20px; height:20px; background:#999; border-radius:100%; float:left; list-style:none;
text-align:center; line-height:20px; color:#fff; font-size:12px; cursor:pointer; font-weight:bold;
margin:0 3px; transition:background 0.2s;}
#banner .tab ul li.on{background:#c00;}
#banner .btn{display:none;}
#banner .btn div{width:30px; height:60px; background:rgba(0,0,0,.2); color:#fff; text-align:center;
line-height:60px; cursor:pointer; position:absolute; top:calc(50% - 30px); }
#banner .btn div.left{ left:0; }
#banner .btn div.right{ right:0;}
<
>
1
2
3
4
5
6
学习Java的同学注意了！！！学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入Java学习交流群：253772578，我们一起学Java！
网友评论