制作一个电商网站的轮播图效果

各位亲爱的伙伴们

大家周末愉快

上次给大家写了

给猫猫制作简单的轮播图

收到了，小伙伴们一致吐槽，娜娜制作出来的这个轮播图不能动呀~。好吧说实话，那个本来就动不了。但是伙伴们的建议，我都收到了，那么今天我们来制作一个，可以自己动的轮播图——某电商网站的轮播图制作。

制作网站的轮播图

第一步：

准备素材，毕竟是要做一个电商网站的轮播图，不能像上次一样随便弄点猫猫图片就上去了，看到咱们高大上的效果图了吗？

里面的每一张图片，都是娜娜精心在网上挑选的，毕竟娜娜的设计水平有限，做不出来这么高大上的图片。

第二步：

图片素材准备完毕，咱们来开始编代码~

首先还是页面的布局：

通过效果图我们可以看到：整个 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！