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

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

您可能感兴趣的文章:

• 原生JS实现层叠轮播图
• 原生JS京东轮播图代码
• 原生js实现旋转木马轮播图效果
• 原生js实现轮播图的示例代码
• 支持移动端原生js轮播图
• 原生JS轮播图插件
• 原生js实现无限循环轮播图效果
• 原生js实现焦点轮播图效果
• 原生js实现无缝轮播图效果
• 原生js实现网易轮播图效果
• 原生js实现移动开发轮播图、相册滑动特效
• js原生代码实现轮播图的实例讲解