用原生JS怎样做商品轮播图,代码是什么
Admin 2022-06-13 群英技术资讯 795 次浏览
本文实例为大家分享了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>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了react实现浏览器自动刷新的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本篇文章带大家一起来了解一下Node.js中的event-loop(时间循环)机制,希望对大家有所帮助!
本篇文章带大家了解一下nodejs中的热重启、get请求、post请求和中间件,希望对大家有所帮助!
js获取json对象中的key与value值的方法很简单,下面是javascript案例,代码。 scriptvarjsonObj={张三:中国,李四:美国};for(varkeyinjsonObj){console.log(key+===+jsonObj[key]);}/script 上面的javascript代码分别输出json对象的key和value字符串,如图所
今天给大家分享的是关于JS可枚举属性的内容,我们知道在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。接下来我们就一起来了解一下怎么判断属性是否可枚举和枚举性的作用。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008