<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src='animation.js'></script> <style> * { margin: 0px; padding: 0px; } ol { list-style: none; } #box { width: 500px; height: 200px; border: 1px solid grey; margin-left: 500px; margin-top: 200px; position: relative; box-sizing: border-box; overflow: hidden; } #img { height: 200px; width: 3000px; position: absolute; } #img img { width: 500px; float: left; } #img img:first-child { z-index: 1; } .current { background-color: yellow; } #arrow_l,#arrow_r { width: 30px; height: 30px; background: rgba(255,255,255,0.3); text-align: center; font-size: 30px; line-height: 30px; position: absolute; top: 85px; left: 0px; display: none; } #arrow_r { left: 467px; } ol { position: absolute; bottom: 17px; right: 20px; z-index: 2; } ol li { width: 22px; height: 22px; background-color: #fff; margin: 5px; float: left; text-align: center; line-height: 24px; } </style> </head> <body> <div id='box'> <div id='img'> <img src="images/wf1.jpg" alt=""> <img src="images/wf2.jpg" alt=""> <img src="images/wf3.jpg" alt=""> <img src="images/wf4.jpg" alt=""> <img src="images/wf5.jpg" alt=""> </div> <div id='arrow_l'><</div> <div id='arrow_r'>></div> <ol> </ol> </div> <script> var box = document.getElementById('box'); var imgBox = document.getElementById('img'); var imgWidth = imgBox.children[0].offsetWidth; var ol = box.getElementsByTagName('ol')[0]; var num = imgBox.children.length; var arrow_l = document.getElementById('arrow_l'); var arrow_r = document.getElementById('arrow_r'); var timeId; for(var i = 0;i < num;i++) { var li = document.createElement('li'); li.innerText = i + 1; ol.appendChild(li); if(i===0) { li.className = 'current'; } li.index = i; li.onclick = liClick; } function liClick() { if(this.index < num) { animation(imgBox,-this.index*imgWidth); } for(var i = 0;i < num;i++) { ol.children[i].className = ''; } this.className = 'current'; liIndex = this.index; } box.onmousemove = function() { arrow_l.style.display = 'block'; arrow_r.style.display = 'block'; clearInterval(timeId); timeId = null; } box.onmouseout = function() { arrow_l.style.display = ''; arrow_r.style.display = ''; timeId = setInterval(function() { rightClick(); },1000) } arrow_l.onclick = leftClick; arrow_r.onclick = rightClick; var image = imgBox.children[0].cloneNode(true); imgBox.appendChild(image); var liIndex = 0; function rightClick() { if(liIndex===num) { imgBox.style.left = '0px'; liIndex = 0; } liIndex+=1; if(liIndex < num) { ol.children[liIndex].click(); }else { animation(imgBox,-liIndex*imgWidth); for(var i = 0;i < num;i++) { ol.children[i].className = ''; } ol.children[0].className = 'current'; } } function leftClick() { if(liIndex===0) { liIndex = num; imgBox.style.left = -liIndex*imgWidth + 'px'; } liIndex -=1; ol.children[liIndex].click(); } timeId = setInterval(function() { rightClick(); },1000) </script> </body> </html>
function animation(element,target) { var step = 10; if(element.timeId) { clearInterval(element.timeId); element.timeId = null; } element.timeId = setInterval(function() { if(element.offsetLeft > target) { step = -Math.abs(step); } if(Math.abs(target - element.offsetLeft) < Math.abs(step)){ element.style.left = target + 'px'; clearInterval(element.timeId); }else { element.style.left = element.offsetLeft + step + 'px'; } },3) }
运行结果：