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

各位亲爱的伙伴们

大家周末愉快

上次给大家写了

给猫猫制作简单的轮播图

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

制作网站的轮播图

第一步：

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

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

第二步：

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

首先还是页面的布局：

通过效果图我们可以看到：整个 banner 是一个模块，里面有三个子模块图片 pic，左右点击的按钮 btn，和小面的6个小按钮。代码就像下面这个样子。

布局完成之后，下面我们来补充样式：

好的，我们的布局和样式都写完了，页面就是下面的效果了。

现在我们来写 JS 代码，记得要导入jQuery的包呦~

当我们的鼠标划入的时候，更换图片图片，更换按钮的背景色~

这段代码实现的功能是，当我们的鼠标移动到主图上或者按钮上时，显示按钮。其他时候隐藏按钮(btn)。

当我们点击两边的 btn 时触发这个事件，轮播图会变换。

接下来设置自动轮播，并且调用这个函数。

最后一个功能，当我们的鼠标滑动上去的时候图片停止不动。

效果：

好的今天就到这里了

再见了