原生JavaScript实现轮播图

时间：2021-05-25

本文实例为大家分享了JavaScript实现轮播图的具体代码，供大家参考，具体内容如下

效果：

代码：

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul, li { list-style: none; } .banner { width: 1200px; height: 535px; border: 1px solid red; margin: 0 auto; position: relative; } .slider li { position: absolute; left: 0; top: 0; } a { width: 40px; height: 50px; background-color: rgba(0, 0, 0, 0.1); font-size: 50px; text-align: center; line-height: 50px; position: absolute; text-decoration: none; color: gray; } .btnl { left: 0; top: 50%; margin-top: -15px; } .btnr { right: 0; top: 50%; margin-top: -25px; } .tabs { position: absolute; bottom: 20px; left: 50%; margin-left: -75px; } .tabs li { width: 15px; height: 15px; background-color: #ccc; border-radius: 50%; float: left; margin-right: 10px; } </style> </head> <body> <div class="banner"> <ul class="slider"> <li><img src="img/b1.jpg" alt="" /></li> <li><img src="img/b2.jpg" alt="" /></li> <li><img src="img/b3.jpg" alt="" /></li> <li><img src="img/b4.jpg" alt="" /></li> <li><img src="img/b5.jpg" alt="" /></li> <li><img src="img/b6.jpg" alt="" /></li> </ul> <a href="javascript:void(0);" class="btnl"> <</a> <a href="javascript:void(0);" class="btnr">></a> <ul class="tabs"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script type="text/javascript"> var banner = document.getElementsByClassName("banner")[0]; var slider = document.getElementsByClassName("slider")[0]; var li = slider.getElementsByTagName("li"); var btnl = document.getElementsByClassName("btnl")[0]; var btnr = document.getElementsByClassName("btnr")[0]; var tabs = document.getElementsByClassName("tabs")[0]; var btns = tabs.getElementsByTagName("li"); //初始化 btns[0].style.backgroundColor = "red"; for(var i = 0; i < li.length; i++) { if(i == 0) { continue; } else { li[i].style.opacity = 0; } } var timer = setInterval(mover, 1000); //声明一个变量，代表当前图片的下标 var num = 0; function mover() { num++; if(num == li.length) { num = 0; } for(var i = 0; i < li.length; i++) { li[i].style.opacity = 0; btns[i].style.backgroundColor = "#ccc"; } li[num].style.opacity = 1; btns[num].style.backgroundColor = "red"; } function movel() { num--; if(num == -1) { num = li.length - 1; } for(var i = 0; i < li.length; i++) { li[i].style.opacity = 0; btns[i].style.backgroundColor = "#ccc"; } li[num].style.opacity = 1; btns[num].style.backgroundColor = "red"; } banner.onmouseover = function() { clearInterval(timer) } banner.onmouseout = function() { timer = setInterval(mover, 1000) } btnl.onclick = function(e) { movel(); } btnr.onclick = function(e) { mover(); } // 小圆点效果 for(var i = 0; i < btns.length; i++) { btns[i].index = i; btns[i].onmouseover = function() { if(this.index == num) { return; } else { for(var i = 0; i < li.length; i++) { li[i].style.opacity = 0; btns[i].style.backgroundColor = "#ccc"; } li[this.index].style.opacity = 1; btns[this.index].style.background="red"; num=this.index; } } } </script> </body></html>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章