原生js实现轮播图

<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> 

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