定时器我们经常使用。在平时的网页开发中。轮播图离不开定时器
最近在项目中遇到一个轮播图。提起轮播图想必大家都不陌生。自己就写了个轮播图。直接上图
先解释一下
上面的这写轮播图片不是一张一张的走。而是。利用定时器 让这些图片像流水一样的从右往左移动。用户可以看到的区域只有四副图。
如果想要让图片滚动起来没有断片的赶脚。就要在这个轮播图的不可见区域还要有一副图。实际上是五副图
思路如下;
1.五张图片都放在中间的div里面。中间的div设置width保证能放的下这五张图片。不让回换行显示。就实现不了轮播的效果
2 中间层的div定位到最外层的div里面 通过移动中间div的leftj距离来改变
3在往过走的过程中判断。如果走的距离达到一张图片的宽度。就给第一张截取出来放到图片的末尾。这儿注意的是让整个中间div的left变成0;要不整个div就跟着走了
这样用定时器一直驱动着走。就轮播起来了
水平有限。就给大家分享到这里!!!