这篇文章主要为大家详细介绍了原生JavaScript实现轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:- js实现轮播图的完整代码
- 原生js实现轮播图的示例代码
- js实现支持手机滑动切换的轮播图片效果实例
- js实现点击左右按钮轮播图片效果实例
- JS轮播图实现简单代码
- JS实现左右无缝轮播图代码
- JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
- 原生js实现无限循环轮播图效果
- 使用html+js+css 实现页面轮播图效果(实例讲解)
- 基于vue.js轮播组件vue-awesome-swiper实现轮播图
转载请说明出处
知优网 » 原生JavaScript实现轮播图(JavaScript实现轮播图)
知优网 » 原生JavaScript实现轮播图(JavaScript实现轮播图)