原生js实现轮播图
本文实例为大家分享了js轮播图的具体实现代码,供大家参考,具体内容如下
CSS:
<style> *{ margin:0; padding:0; list-style:none; text-decoration:none; font-family:"MicrosoftYaHei",Arial,Helvetica,sans-serifsans-serif; } body{ background:#eee; } #Bigbox{ width:720px; height:420px; border:1pxsolid#333; margin:60pxauto; } #Box{ width:700px; height:400px; position:relative; overflow:hidden; top:10px; left:10px; } #Ul{ height:400px; position:absolute; top:0; left:0; } #Ulli{ width:700px; height:400px; float:left; } #Left{ width:60px; height:50px; border-radius:30%; background:rgba(96,96,96,.5); position:absolute; top:50%; left:0; margin-top:-25px; color:#fff; line-height:50px; text-align:center; cursor:pointer; font-size:20px; display:none; } #Right{ width:60px; height:50px; border-radius:30%; background:rgba(96,96,96,.5); position:absolute; top:50%; right:0; margin-top:-25px; color:#fff; line-height:50px; text-align:center; cursor:pointer; font-size:20px; display:none; } </style>
html:
<divid="Bigbox"> <divid="Box"> <ulid="Ul"> <li> 1<imgsrc="img/1.jpg"width="100%"height="100%"> </li> <li> 2<imgsrc="img/2.jpg"width="100%"height="100%"> </li> <li> 3<imgsrc="img/3.jpg"width="100%"height="100%"> </li> <li> 4<imgsrc="img/4.jpg"width="100%"height="100%"> </li> <li> 5<imgsrc="img/5.jpg"width="100%"height="100%"> </li> <li> 6<imgsrc="img/6.jpg"width="100%"height="100%"> </li> <li> 7<imgsrc="img/7.jpg"width="100%"height="100%"> </li> <li> 8<imgsrc="img/8.jpg"width="100%"height="100%"> </li> <li> 9<imgsrc="img/9.jpg"width="100%"height="100%"> </li> <li> 10<imgsrc="img/10.jpg"width="100%"height="100%"> </li> </ul> <divid="Left"onselectstart="returnfalse">左</div> <divid="Right"onselectstart="returnfalse">右</div> </div> </div>
js:
<script> window.onload=function(){ varn=0; vartimer=null; vartimer1=null; vartimer2=null; vartimer3=null; varoDiv=document.getElementById('Box') varoUl=document.getElementById('Ul') varoLi=oUl.getElementsByTagName('li') //获取div宽度 varoDivWidth=getStyle(oDiv,'width').split('px')[0]//复制oUl的innerHTML oUl.innerHTML+=oUl.innerHTML //设置ul宽度 oUl.style.width=oLi.length*oDivWidth+'px' //获取ul宽度 varoUlWidth=getStyle(oUl,'width').split('px')[0]//封装获取非行间样式函数 functiongetStyle(obj,sName){ if(obj.currentStyle){ returnobj.currentStyle[sName]; }else{ returngetComputedStyle(obj,false)[sName]; } } //执行函数 clearInterval(timer3) timer3=setInterval(function(){ Run() },2000) //封装运动函数 functionRun(){ clearInterval(timer) timer=setInterval(function(){ n-=20; oUl.style.left=n+'px' if(n%oDivWidth==0){ clearInterval(timer3) clearInterval(timer) clearInterval(timer1) timer1=setTimeout(function(){ Run() },2000) } if(n<=-oUlWidth/2){ oUl.style.left=0; n=0; clearInterval(timer3) clearInterval(timer) clearInterval(timer1) timer1=setTimeout(function(){ Run() },2000) } },30) } //鼠标移入停止滚动 oDiv.onmouseover=function(){ Left.style.display='block' Right.style.display='block' clearInterval(timer3) clearInterval(timer2) timer2=setInterval(function(){ if(n%oDivWidth==0){ clearInterval(timer) clearInterval(timer1) } },30) } //鼠标移出继续执行 oDiv.onmouseout=function(){ Left.style.display='none' Right.style.display='none' clearInterval(timer3) clearInterval(timer2) clearInterval(timer1) timer1=setTimeout(function(){ Run() },2000) } //向左 Left.onclick=function(){ //清除所有定时器 clearInterval(timer) clearInterval(timer1) clearInterval(timer2) clearInterval(timer3) timer=setInterval(function(){ n-=50; oUl.style.left=n+'px' if(n%oDivWidth==0){ clearInterval(timer) } if(n<=-oUlWidth/2){ oUl.style.left=0; n=0; } },30) } //向右 Right.onclick=function(){ clearInterval(timer) clearInterval(timer1) clearInterval(timer2) clearInterval(timer3) if(n==0){ n=-oUlWidth/2 } clearInterval(timer) timer=setInterval(function(){ n+=50; oUl.style.left=n+'px' if(n%oDivWidth==0){ clearInterval(timer) } },30) } } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。