原生js实现轮播图

本文实例为大家分享了js轮播图的具体实现代码，供大家参考，具体内容如下

CSS：

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

html：

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

js：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。