<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>
* { 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; }
<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>