<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0px; padding: 0px; } .stage { 300px; height: 200px; border: 10px solid black; margin: 50px; margin-left: 200px; overflow: hidden; position: relative; } .ad-banner { 1500px; height: 200px; } .ad { 300px; height: 200px; float: left; font-size: 50px; line-height: 200px; color: white; text-align: center; } .left-btn, .right-btn { height: 200px; 20px; position: absolute; line-height: 200px; background-color: gray; opacity: 0.5; font-size: 20px; text-align: center; } .left-btn { left: 0px; top: 0px; } .right-btn { right: 0px; top: 0px; } .left-btn:hover, .right-btn:hover { cursor: pointer; opacity: 0.8; } </style> </head> <body> <div class="stage"> <div class="left-btn"> <</div> <div class="right-btn">></div> <div class="ad-banner"> <div class="ad" style="background-color: green;">1</div> <div class="ad" style="background-color: royalblue;">2</div> <div class="ad" style="background-color: red;">3</div> <div class="ad" style="background-color: yellow;">4</div> <div class="ad" style="background-color: gray;">5</div> </div> </div> </body> </html> <script> var speed = 10; var count = 1; var arr = Array(); document.getElementsByClassName("right-btn")[0].onclick = function() { arr.push(window.setInterval(moveToLeft, 10)); } function moveToLeft() { var banner = document.getElementsByClassName("ad-banner")[0]; if(banner.offsetLeft > count * (-300)&&count<5) { banner.style.marginLeft = banner.offsetLeft - speed + "px"; } else { if(count<5) {count++;} for(var i in arr) { window.clearInterval(arr[i]); } } } document.getElementsByClassName("left-btn")[0].onclick = function() { arr.push(window.setInterval(moveToRight, 10)); } function moveToRight() { var banner = document.getElementsByClassName("ad-banner")[0]; if(banner.offsetLeft < (count-2) * (-300)&&count>1) { banner.style.marginLeft = banner.offsetLeft + speed + "px"; } else { if(count>1) {count--;} for(var i in arr) { window.clearInterval(arr[i]); } } } </script>