各位亲爱的伙伴们
大家周末愉快
上次给大家写了
给猫猫制作简单的轮播图
收到了，小伙伴们一致吐槽，娜娜制作出来的这个轮播图不能动呀~。好吧说实话，那个本来就动不了。但是伙伴们的建议，我都收到了，那么今天我们来制作一个，可以自己动的轮播图——某电商网站的轮播图制作。
制作网站的轮播图
第一步：
准备素材，毕竟是要做一个电商网站的轮播图，不能像上次一样随便弄点猫猫图片就上去了，看到咱们高大上的效果图了吗？
里面的每一张图片，都是娜娜精心在网上挑选的，毕竟娜娜的设计水平有限，做不出来这么高大上的图片。
第二步：
图片素材准备完毕，咱们来开始编代码~
首先还是页面的布局：
通过效果图我们可以看到：整个 banner 是一个模块，里面有三个子模块图片 pic，左右点击的按钮 btn，和小面的6个小按钮。代码就像下面这个样子。
布局完成之后，下面我们来补充样式：
好的，我们的布局和样式都写完了，页面就是下面的效果了。
现在我们来写 JS 代码，记得要导入jQuery的包呦~
当我们的鼠标划入的时候，更换图片图片，更换按钮的背景色~
这段代码实现的功能是，当我们的鼠标移动到主图上或者按钮上时，显示按钮。其他时候隐藏按钮（btn）。
当我们点击两边的 btn 时触发这个事件，轮播图会变换。
接下来设置自动轮播，并且调用这个函数。
最后一个功能，当我们的鼠标滑动上去的时候图片停止不动。
效果：
好的今天就到这里了
再见了
网友评论