原生js实现轮播图

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

本文实例为大家分享了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> 

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