标签：
使用原生js实现大屏4图片轮播，循环。
代码质量不高，希望大神指正。
<!DOCTYPE html> <html> <head> <style> html{ height: 100%; } body{ position: relative; height:100%; background-color: bisque; } .is-Negative { width:900px; height: 650px; padding: 0; position: absolute; top: 50%; left: 50%; margin-left: -450px; /* (width + padding)/2 */ margin-top: -325px; /* (height + padding)/2 */ border: 1px solid black; overflow: hidden; } #container{ width:3800px; padding: 0; margin: 0; left:-2700px; position: absolute; } .pic{ width:900px; height: 650px; position: relative; margin: 0; } </style> </head> <body> <div class="is-Negative"> <div id="container"> <img id="pic1" class="pic" src="cabin.png"/><img class="pic" src="cake.png"/><img class="pic" src="circus.png"/><img class="pic" src="game.png"/> </div> </div> <script> var imgs = new Array(); imgs[0] ="cabin.png"; imgs[1] = "cake.png"; imgs[2] = "game.png"; imgs[3] = "circus.png"; for(var i=0;i<=3;i++){ loadImg(imgs[i]); }; var c = document.getElementById("container"); c.addEventListener("click",containerMove,false); function containerMove(){ var l; if(c.style.left!=""){ if(parseInt(c.style.left)==0){ moveAnimation(c,0,2700,0.2,‘right‘); return; } else{ l =parseInt(c.style.left); } } else{ l= -2700; } moveAnimation(c,l,900,0.1,"left"); } function moveAnimation(ele,pos,len,time,direc){ var speed = 10*len/(1000*time); if(direc == "right"){ speed = -speed; } var handler = setInterval(function(){ ele.style.left = pos + speed +"px" ; pos = parseInt(ele.style.left); console.log(pos); if(direc=="right" && pos == -2700){ clearInterval(handler); } else if(pos%900 == 0 &&direc!="right"){ clearInterval(handler); } },10); } function loadImg(url){ var img = new Image(); img.src = url; } </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/VinceLeon/p/4763712.html
