> 效果如图  > 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)