文章目录
[+]
不关注《一碳科技》？那你会错过很多哦！
很多刚入门web前真个小伙伴，可能对某些web前端效果留有一些疑问，个中，各大购物网站中的商品轮播图，是很多新手所迷惑的，以是本日《一碳科技》就跟大家谈一谈如何实现“自动商品轮播图”的效果。
喜好这篇文章的小伙伴，动动小手点个赞哦，你们的支持是
上手操作
（图片来自网络侵删）
首先我们先来制作第一个DIV容器，
除了定位办法要把稳之外，我们还要把稳一下溢出屏幕的内容的处理办法，由于DIV1会向左移动，以是DIV1里面的元素会向左溢出，但是我们的轮播图并不容许这样的情形发生，在这里就须要用到overflow属性了，我们给overflow设置一个hidden的值，这么做的意思是，溢出屏幕的内容将被剪切且不被显示。
如图，为了都雅，我们给它加上一个阴影。
第一个DIV容器设计完成了，接下来我们制作第二个容器，第二个容器要比第一个容器宽度大400%，高度相同，这个容器的浸染是存放图片，在这里我们要把稳，第二个容器也须要用到absolute定位，如果没有这个定位的话，容器就无法利用left属性进行移动！
如上图所示，我们定义了一个动画，名为：ad_run，全体动画过程为10s，重复播放。10s钟内有分别有四个动画，并且我们还须要设置图片勾留的韶光，以供用户不雅观看，我们可以如下图那样做。
写到这里，我们的目的已经达成了，想要看效果的小伙伴可以私信获取源码，先关注《一碳科技》，然后私信“轮播图设计源码”即可获取源码。
