Js原生轮播-直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport">
<title>Document</title>
<link rel="stylesheet" href=""/>
<style>
      *{
         margin:0;
         padding:0;
         list-style:none;
         text-decoration:none;
         font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif;
      }
      body{
        background:#eee;
      }
      #Bigbox{
        width:720px;
        height:420px;
        border:1px solid #333;
        margin:60px auto;
      }
      #Box{
        width:700px;
        height:400px;
        position:relative;
        overflow: hidden;
        top:10px;
        left:10px;
      }
      #Ul{
        height:400px;
        position:absolute;
        top:0;
        left:0;
      }
      #Ul li{
        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>

</head>
<body>
<div id="Bigbox">
<div id="Box">
<ul id="Ul">
<li>
<img src="img/1.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/2.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/3.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/4.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/5.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/6.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/7.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/8.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/9.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/10.jpg" width="100%" height="100%">
</li>
</ul>

<div id="Left" onselectstart="return false">左</div>
<div id="Right" onselectstart="return false">右</div>
</div>
</div>
<script>
   window.onload = function(){
     var n = 0;
     var timer = null;
     var timer1 = null;
     var timer2 = null;
     var timer3 = null;
     var oDiv = document.getElementById('Box')
     var oUl = document.getElementById('Ul')
     var oLi = oUl.getElementsByTagName('li')
     //获取div宽度
     var oDivWidth = getStyle(oDiv,'width').split('px')[0]      //复制oUl的innerHTML
        oUl.innerHTML+= oUl.innerHTML
        //设置ul宽度
     oUl.style.width = oLi.length*oDivWidth+'px'
     //获取ul宽度
     var oUlWidth = getStyle(oUl,'width').split('px')[0]      //封装获取非行间样式函数
      function getStyle(obj,sName){
if(obj.currentStyle){
return obj.currentStyle[sName];
}else{
return getComputedStyle(obj,false)[sName];
}
}
//执行函数
clearInterval(timer3)
timer3 = setInterval(function(){
Run()
},2000)
//封装运动函数
function Run(){
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>
</body>
</html>

秒客网

Js原生轮播-直接上代码

相关文章