前端连续移动的轮播图的实现

定时器我们经常使用。在平时的网页开发中。轮播图离不开定时器

最近在项目中遇到一个轮播图。提起轮播图想必大家都不陌生。自己就写了个轮播图。直接上图

先解释一下

上面的这写轮播图片不是一张一张的走。而是。利用定时器 让这些图片像流水一样的从右往左移动。用户可以看到的区域只有四副图。

如果想要让图片滚动起来没有断片的赶脚。就要在这个轮播图的不可见区域还要有一副图。实际上是五副图

思路如下；

1.五张图片都放在中间的div里面。中间的div设置width保证能放的下这五张图片。不让回换行显示。就实现不了轮播的效果

2 中间层的div定位到最外层的div里面 通过移动中间div的leftj距离来改变 

3在往过走的过程中判断。如果走的距离达到一张图片的宽度。就给第一张截取出来放到图片的末尾。这儿注意的是让整个中间div的left变成0；要不整个div就跟着走了

这样用定时器一直驱动着走。就轮播起来了

水平有限。就给大家分享到这里！！！