对于初学者而言，提到轮播图，首先想到到的是利用for循环和定时器来实现图片的循环播放，但是实践证明，在for循环中使用定时器并不能实现图片之间的过度和图片的循环播放。那么轮播图该怎样实现呢？
在js中，回调函数实际也是一种循环，而且如果不设置限制条件，回调函数是一个死循环。
回调函数就是在函数内部调用函数自身。
下面就用回调函数做一个简单的轮播图。
最后一张和第一张图片是一样的，是为了更好地显示过渡的效果
<body>
<div class="box">
<ul id="list">
<li><img src="imgs/1.jpg"></li>
<li><img src="imgs/2.jpg"></li>
<li><img src="imgs/3.jpg"></li>
<li><img src="imgs/4.jpg"></li>
<li><img src="imgs/5.jpg"></li>
<li><img src="imgs/6.jpg"></li>
<li><img src="imgs/7.jpg"></li>
<li><img src="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;
}我是将函数进行了封装，已便后期重复使用。
下面是函数使用的参数：
// 获取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和鼠标移除事件函数中的循环同时发生，就会出现多个循环同时进行，导致图片混乱。
下面使用的一点编写思路，仅供参考：
通过ul的相对位置的循环移动，实现图片展示效果的循环.
所用知识点：
定时器：setInterval()，解除定时 clearInterval，回调函数
希望本段分享可以给大家带来帮助，欢迎大家提出意见和建议。谢谢！
原文：https://www.cnblogs.com/hubufen/p/10889745.html