学了点dom,写个轮播练练手，这是本人大体写的样子，一些细节功能还待完善。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="container"> <div id="zuo"><</div> <div id="you">></div> <div class="pics" style="left: 0px;"> <img src="../img/001.jpg" /> <img src="../img/timg (1).jpg" /> <img src="../img/timg (2).jpg" /> <img src="../img/timg (3).jpg" /> <img src="../img/timg.jpg" /> </div> </div> <style> #you{ font-size: 50px;color: white;position: absolute; z-index:11; top:130px;right:10px; } #zuo{font-size: 50px;color: white;position: absolute; z-index: 11; top:130px;lefe: 10px; } #you:hover,#zuo:hover{opacity: 0.5;cursor: pointer;} *{margin: 0; padding: 0;} #container{position: relative;border:8px solid red; width: 300px;margin: 0 auto; overflow: hidden; height: 300px;border-radius: 6px;} .pics{width: 1600px;height: 300px; position: absolute;} .pics>img{ width: 300px;height: 300px; display: inline-block;} </style> <script> var container=document.getElementById("container"); var you=document.getElementById("you"); var zuo=document.getElementById("zuo"); var sss=document.getElementsByClassName("pics")[0]; you.addEventListener("click",next); zuo.addEventListener("click",pre) function pre(){ var ss=parseInt(sss.style.left); var i=0; if(ss==0){ i=1; sss.style.left=-1200*i+"px"; } if(ss==-1200){ i=3; sss.style.left=-300*i+"px"; } if(ss==-900){ i=2; sss.style.left=-300*i+"px"; } if(ss==-600){ i=1; sss.style.left=-300*i+"px"; } if(ss==-300){ i=0; sss.style.left=-300*i+"px"; } } function next(){ var ss=parseInt(sss.style.left); var i=0; sss.style.left=-300*i+"px"; if(ss==0){ i=1; sss.style.left=-300*i+"px"; } if(ss==-300){ i=2; sss.style.left=-300*i+"px"; } if(ss==-600){ i=3; sss.style.left=-300*i+"px"; } if(ss==-900){ i=4; sss.style.left=-300*i+"px"; } }function autoplay(){ lunbo=setInterval(next,2000);//没用var 声明 } autoplay();
container.onmouseover=function(){ clearInterval(lunbo); } container.onmouseout=function(){autoplay();
} </script> </body> </html>
