11. 輪播圖setTimeout版 · 前端demo

> 效果如圖 ![](https://box.kancloud.cn/752be240c53bedb5d4a39d5d97cef3d6_892x559.gif) > html代碼 ``` var container = document.getElementById("container"); var list = document.getElementById("list"); var prev = document.getElementById("prev"); var next = document.getElementById("next"); var btns = document.getElementById("btns").children; var index = 0; var animated = false; /* ---------------------------prev, next點擊功能------------------ */ prev.onclick = function () { if(animated) { return false; //當animated為true時，prev并不會執行 } animate(600); index--; showBtn(); } next.onclick = function () { if(animated) { return false; } animate(-600); index++; showBtn(); } /* -------------------------焦點點擊功能-------------------- */ for(let i=0; i<btns.length; i++) { btns[i].onclick = function(){ /* animate偏移量為點擊的i-原先的index */ animate((i-index)*-600); /* 此時的index等于點擊的i值 */ index = i; showBtn(); } } /* ----------------------自動播放---------------------------- */ function autoplay() { var timer2 = setInterval(function(){ next.onclick(); }, 800); } function stopplay() { clearInterval(timer2); } autoplay(); /* ----------------------鼠標懸停播放停止---------------------- */ container.onmouseover = stopplay; container.onmouseout = autoplay; function animate(offset) { var newLeft = parseInt(list.style.left) + offset; //number類型 var timer = 300; //便宜一次總共用時300ms var interval = 10; //每隔10ms執行一次 var speed = offset / (timer / interval); //每次偏移的speed為20px function go() { animated = true; var leftValue = parseInt(list.style.left); if((speed<0 && leftValue>newLeft) || (speed>0 && leftValue<newLeft)){ //如果速度小于0(向左偏移),并且此時left的至大于設定偏移的距離 //或者如果速度大于0(向右偏移),并且此時left的值小于設定偏移的距離 list.style.left = leftValue + speed + "px"; //當前的left值+speed setTimeout(go, interval); //每隔10ms執行一次go(每10ms,偏移20px) } /* 當前left值等于設定的newLeft后 */ else { animated = false; //animated回到false，點擊事件可以執行 if(newLeft<-3000) { newLeft = -600; list.style.left = newLeft + "px"; } if(newLeft>-600) { newLeft = -3000; list.style.left = newLeft + "px"; } } /* 每隔10ms list的left增加一個speed */ } go(); console.log("目標偏移量："+newLeft); } function showBtn() { /* 先移除所有current */ for(i=0; i<btns.length; i++) { btns[i].classList.remove("current"); } if(index<0){ index = 4; } if(index>4){ index = 0; } /* 給當前index加上current */ btns[index].classList.add("current"); } ``` ---- 整個demo以上傳至[github](https://github.com/MrXuxu/H5_demo/tree/master/%E8%BD%AE%E6%92%AD%E5%9B%BEsetTimout%E7%89%88)