纯JS实现轮播图
这几天一直在看js动画,今天又get到了一个轮播图,使用纯js实现的,但是没有美化哈,需要的小伙伴自己美化喔
如下代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>图片轮播的效果</title> <styletype="text/css"> *{ margin:0; padding:0; text-decoration:none; } body{ padding:20px; } #container{ position:relative; width:600px; height:400px; border:3pxsolid#333; overflow:hidden; } #list{ position:absolute; z-index:1; width:4200px; height:400px; } #listimg{ float:left; width:600px; height:400px; } #buttons{ position:absolute; left:250px; bottom:20px; z-index:2; height:10px; width:100px; } #buttonsspan{ float:left; margin-right:5px; width:10px; height:10px; border:1pxsolid#fff; border-radius:50%; background:#333; cursor:pointer; } #buttons.on{ background:orangered; } .arrow{ position:absolute; top:180px; z-index:2; display:none; width:40px; height:40px; font-size:36px; font-weight:bold; line-height:39px; text-align:center; color:#fff; background-color:RGBA(0,0,0,.3); cursor:pointer; } .arrow:hover{ background-color:RGBA(0,0,0,.7); } #container:hover.arrow{ display:block; } #prev{ left:20px; } #next{ right:20px; } </style> </head> <body> <divid="container"> <divid="list"style="left:-600px;"> <imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg"alt="无缝滚动"/> <imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg"alt="无缝滚动"/> <imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg"alt="无缝滚动"/> <imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg"alt="无缝滚动"/> <imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg"alt="无缝滚动"/> <imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg"alt="无缝滚动"/> <imgsrc="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg"alt="无缝滚动"/> </div> <divid="buttons"> <spanindex="1"class="on"></span> <spanindex="2"></span> <spanindex="3"></span> <spanindex="4"></span> <spanindex="5"></span> </div> <ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"id="prev"class="arrow"><</a> <ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"id="next"class="arrow">></a> </div> <scripttype="text/javascript"> window.onload=function(){ varcontainer=document.getElementById("container"); varlist=document.getElementById("list"); varbuttons=document.getElementById("buttons").getElementsByTagName('span'); varprev=document.getElementById("prev"); varnext=document.getElementById("next"); varindex=1; functionanimate(offset){ varnewLeft=parseInt(list.style.left)+offset; list.style.left=newLeft+'px'; if(newLeft<-3000){ list.style.left=-600+'px'; } if(newLeft>-600){ list.style.left=-3000+'px'; } } functionbuttonsshow(){ for(vari=0;i<buttons.length;i++){ if(buttons[i].className=='on'){ buttons[i].className=''; } } buttons[index-1].className='on'; } prev.onclick=function(){ index-=1; if(index<1) { index=5; } buttonsshow(); animate(600); }; next.onclick=function(){ index+=1; if(index>5){ index=1; } buttonsshow(); animate(-600); }; //自动播放 vartimer; functionplay(){ timer=setInterval(function(){ next.onclick(); },1000) } play(); functionstop(){ clearInterval(timer); } container.onmouseover=stop; container.onmouseout=play; for(vari=0;i<buttons.length;i++){ (function(i){ buttons[i].onclick=function(){ varclickindex=parseInt(this.getAttribute('index')); varoffset=600*(index-clickindex); animate(offset); index=clickindex; buttonsshow(); } })(i); } } </script> </body> </html>
以上所述是小编给大家介绍的纯JS实现轮播图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!