天池像两个鸡蛋融合在一起,上面大雾迷蒙,更添加了几分神秘的色彩。而且天池在长白山的最高点,所以海拔很高,就像耸入云端似的,都是大雾,所以被称为天池。旁边还有火山,火山的顶上灰蒙蒙的,全都被火山灰覆盖了。那里还有很多火山石,有的像狮子,有的像大象,有的像绵羊……数也数不清。
本文实例为大家分享了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实现轮播图内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!