根据前段时间学的大图轮播，自己做了一个简单的图片自动轮播
代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #body { width: 90%; border: 1px solid red; height: 1000px; margin: 0px auto; } #stage { width: 1000px; height: 500px; border: 10px solid black; position: absolute; left: 150px; top: 200px; overflow: hidden; } #left-btn { position: absolute; left: 0px; top:0px; height: 500px; width: 40px; background-color: black; color: white; opacity: 0.5; line-height: 500px; text-align: center; font-size: 30px; z-index: 999; } #right-btn { position: absolute; right: 0px; top:0px; height: 500px; width: 40px; background-color: black; color: white; opacity: 0.5; line-height: 500px; text-align: center; font-size: 30px; z-index: 999; } #left-btn:hover { cursor: pointer; opacity: 0.7; } #right-btn:hover { cursor: pointer; opacity: 0.7; } #ad-banner { height: 500px; width: 5000px; position: relative; background-color: blue; } .ad{ width: 1000px; height: 500px; float: left; text-align: center; line-height: 500px; font-size: 100px; } </style> </head> <body> <div id="body"> <div id="stage"> <div id="left-btn"><</div> <div id="right-btn">></div> <div id="ad-banner"> <div class="ad" style="background-color: red">1</div> <div class="ad" style="background-color: green">2</div> <div class="ad" style="background-color: blue">3</div> <div class="ad" style="background-color: pink">4</div> <div class="ad" style="background-color: white">5</div> </div> </div> </div> </body> </html> <script> var speed = 10; var count = 1; var banner = document.getElementById('ad-banner'); var arr = Array(); window.onload=function(){setInterval('change()',3000);} function change() { arr.push(window.setInterval('moveLeft()',10)); } function moveLeft() { var banner_left = banner.offsetLeft; if(count<5) { if(banner_left>(count*(-1000))) { banner.style.marginLeft = banner_left - speed + 'px' } else { for(var i in arr) { window.clearInterval(arr[i]); } if(count<5) { count++; } } } else if(count==5) { banner.style.marginLeft = banner_left + 4000 + 'px'; for(var i in arr) { window.clearInterval(arr[i]); } count=1 }
}
其中有个体验不好的地方是从最后一张到第一张速度太快，没有轮播效果。这个问题有待解决。