js 图片轮播
學了點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();
autoplay();
?
}</script> </body></html>?
轉載于:https://www.cnblogs.com/rain-null/p/6899295.html
總結
- 上一篇： 10601 - Cubes(Ploya)
- 下一篇： 数组去重是面试中经常问到的问题