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

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