对于初学者而言，提到轮播图，首先想到到的是利用for循环和定时器来实现图片的循环播放，但是实践证明，在for循环中使用定时器并不能实现图片之间的过度和图片的循环播放。那么轮播图该怎样实现呢？
在js中，回调函数实际也是一种循环，而且如果不设置限制条件，回调函数是一个死循环。
回调函数就是在函数内部调用函数自身。
下面就用回调函数做一个简单的轮播图。
最后一张和第一张图片是一样的，是为了更好地显示过渡的效果
<body> <div> <ul> <li><img src="http://www.likecs.com/imgs/1.jpg"></li> <li><img src="http://www.likecs.com/imgs/2.jpg"></li> <li><img src="http://www.likecs.com/imgs/3.jpg"></li> <li><img src="http://www.likecs.com/imgs/4.jpg"></li> <li><img src="http://www.likecs.com/imgs/5.jpg"></li> <li><img src="http://www.likecs.com/imgs/6.jpg"></li> <li><img src="http://www.likecs.com/imgs/7.jpg"></li> <li><img src="http://www.likecs.com/imgs/1.jpg"></li> </ul> </div> </body> 设置一下基本样式 .box{ width: 600px; height: 320px; border: 2px solid red; margin:20px auto; overflow: hidden; } /* 调整li尺寸与显示框相同大小，并让li横向并排显示 */ .box ul{ width: 4800px; position: relative; left:0px; } .box ul li{ float: left; width: 600px; height: 320px; background-color: aqua; } /* li中图片大小与li窗口大小一致 */ #list li img{ width: 600px; height: 320px; } 下面来写js我是将函数进行了封装，已便后期重复使用。
下面是函数使用的参数：
move 一次性移动的距离（有正负之分）
yctime 延迟时间（单位：毫秒）
gdTime 过度时间（单位：秒）
num 表示li的个数
// 获取ul标签 var list = document.getElementById("list"); // 获取li标签的宽度（每一次需要移动的距离） var oLi = list.children; var oLiMove = oLi[0].scrollWidth; var num = oLi.length; // 创建函数 function oMove(move,num,yctime,gdTime){ // 设定ul的相对行为初始值 list.style.transition =0 + "s"; list.style.left = 0 + "px"; var a = 0; function omove(){ a = a - Number(move); console.log(a) list.style.transition =0.8 + "s"; list.style.left = a + "px"; if(a <= -move * num) { clearInterval(setIn); // 回调函数 oMove(move,num,yctime,gdTime); } } // 插入时间贞 var setIn = setInterval(omove,yctime); // 设置悬停（鼠标悬浮事件） list.onmouseover = function(){ clearInterval(setIn); console.log(1); } // 设置移除开始循环 list.onmouseout = function(){ setIn = setInterval(omove,yctime); console.log(2); } } oMove(oLiMove,num,2000,0.8);整个函数是一个封装的函数，传入对应的参数便可直接使用。
需要注意的点：当设置条件停止循环或者重新启动循环时，（以鼠标悬浮为例）当鼠标移出是，让循环继续，就必须给setIn重新赋值，否则setIn和鼠标移除事件函数中的循环同时发生，就会出现多个循环同时进行，导致图片混乱。
下面使用的一点编写思路，仅供参考：
需求分析：1、图片间隔1S自动循环播放
2、鼠标放在上面时播放停止
思路：通过ul的相对位置的循环移动，实现图片展示效果的循环
1、创建函数
2、设定ul的初始位置，引入参数来储存移动距离
3、创建函数，设置ul的移动，并将其转换成ul的相对定位
4、插入时间贞，让omove每隔1s执行一次
5、函数中设置停止条件，当最后一个图中展示完成时结束循环，并开始下一轮循环
所用知识点：定时器：setInterval(),解除定时 clearInterval
回调函数
希望本段分享可以给大家带来帮助，欢迎大家提出意见和建议。谢谢！