关于setInterval在api文档中也有很详细的解释，比如下面那两个：
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
这样的解释有点官方，看起来有点绕，接下来我们通过实际例子来看就知道了，通过控制器的开启关闭来做一个无缝滚动
<button class='left'>left</button> <div class='wrap'> <ul class='list_wrap'> <li><img src="./img/0.jpg" alt=""></li> <li><img src="./img/1.jpg" alt=""></li> <li><img src="./img/2.jpg" alt=""></li> <li><img src="./img/3.jpg" alt=""></li> </ul> </div> <button class='right'>right</button>
这是一个简单的无缝滚动的布局
<style> *{ margin: 0; padding: 0; } .wrap{ 760px; margin: 0 auto; overflow: hidden; position: relative; height:108px; background: red; } .list_wrap{ 760px; position: absolute; left: 0; } .list_wrap >li{ list-style: none; float: left; 190px; } .list_wrap >li>img{ 100%; } </style>
最外面一层div包裹着里面的ul li ul以定位的形式固定在div里面
在写动画的时候，我们需要计算下ul的宽度，并且让他等于li.offsetWidth*li.length
list_wrap.style.width = list[0].offsetWidth*list.length+'px'
list_wrap.innerHTML += list_wrap.innerHTML
由于无缝滚动，我们需要设置双倍的宽度才行，所以这里用 +=去计算
无缝滚动实际就是一个障眼法
function move(){ list_wrap.style.left = list_wrap.offsetLeft+spead+'px' // 动画往哪边滚动 +为右 - 为左 if(list_wrap.offsetLeft<-list_wrap.offsetWidth/2){ // 当宽度等于一半的时候，让他left为0 list_wrap.style.left = '0' } if(list_wrap.offsetLeft>0){ // 当宽度等于一半的时候，让他left为0 list_wrap.style.left = -list_wrap.offsetWidth/2+'px' } }
现在我们封装一个让他运动的方法 去决定向左向右滚动以及当他滚动到最后我们应该做什么处理
接下来就是我们的主角上场了
var timer = setInterval(move,30)
我们在这里setInterval里面调用这个方法，让他去执行运动方法
现在我们添加树胶移入移出事件的扩展方法
wrap.onmouseover = function () { clearInterval(timer) } wrap.onmouseout = function () { timer = setInterval(move,30) }
当鼠标移入的时候我们清除定时器，鼠标移出再开启定时器
定时器的用法无非就这两种，开启关闭
完整代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .wrap{ 760px; margin: 0 auto; overflow: hidden; position: relative; height:108px; background: red; } .list_wrap{ 760px; position: absolute; left: 0; } .list_wrap >li{ list-style: none; float: left; 190px; } .list_wrap >li>img{ 100%; } </style> </head> <body> <button class='left'>+</button> <div class='wrap'> <ul class='list_wrap'> <li><img src="./img/0.jpg" alt=""></li> <li><img src="./img/1.jpg" alt=""></li> <li><img src="./img/2.jpg" alt=""></li> <li><img src="./img/3.jpg" alt=""></li> </ul> </div> <button class='right'>-</button> <script> var wrap = document.getElementsByClassName('wrap')[0] var list_wrap = document.getElementsByClassName('list_wrap')[0] var list = list_wrap.getElementsByTagName('li') var left = document.getElementsByClassName('left')[0] var right = document.getElementsByClassName('right')[0] var spead = 2 // 控制向左向右快慢 list_wrap.innerHTML += list_wrap.innerHTML // 计算ul的宽度 list_wrap.style.width = list[0].offsetWidth*list.length+'px' function move(){ list_wrap.style.left = list_wrap.offsetLeft+spead+'px' // 动画往哪边滚动 +为右 - 为左 if(list_wrap.offsetLeft<-list_wrap.offsetWidth/2){ // 当宽度等于一半的时候，让他left为0 list_wrap.style.left = '0' } if(list_wrap.offsetLeft>0){ // 当宽度等于一半的时候，让他left为0 list_wrap.style.left = -list_wrap.offsetWidth/2+'px' } } var timer = setInterval(move,30) wrap.onmouseover = function () { clearInterval(timer) } wrap.onmouseout = function () { timer = setInterval(move,30) } right.onclick = function () { spead = 2 } left.onclick = function () { spead = -2 } </script> </body> </html>