原生js實現(xiàn)輪播圖

更新時間：2017年02月27日 14:04:41 作者：wall1999

這篇文章主要為大家詳細介紹了原生js實現(xiàn)輪播圖的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js輪播圖的具體實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

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] //封裝獲取非行間樣式函數(shù) 
   function getStyle(obj, sName) { 
    if (obj.currentStyle) { 
     return obj.currentStyle[sName]; 
    } else { 
     return getComputedStyle(obj, false)[sName]; 
    } 
   } 
   //執(zhí)行函數(shù) 
   clearInterval(timer3) 
   timer3 = setInterval(function() { 
     Run() 
    }, 2000) 
    //封裝運動函數(shù) 
   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) 
   } 
 
   //鼠標移入停止?jié)L動 
   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) 
 
   } 
 
   //鼠標移出繼續(xù)執(zhí)行 
   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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: