關於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{ width: 760px; margin: 0 auto; overflow: hidden; position: relative; height:108px; background: red; } .list_wrap{ width: 760px; position: absolute; left: 0; } .list_wrap >li{ list-style: none; float: left; width: 190px; } .list_wrap >li>img{ width: 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{ width: 760px; margin: 0 auto; overflow: hidden; position: relative; height:108px; background: red; } .list_wrap{ width: 760px; position: absolute; left: 0; } .list_wrap >li{ list-style: none; float: left; width: 190px; } .list_wrap >li>img{ width: 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>