原生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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。