JS实现轮播图效果的方法有哪些
短信预约 -IT技能 免费直播动态提醒
这篇文章主要讲解了“JS实现轮播图效果的方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JS实现轮播图效果的方法有哪些”吧！
Js实现轮播图01
实现思路
这可能是轮播图最简单点的实现之一，通过更改图片的class="lazy" data-src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的class="lazy" data-src图片链接的名字来实现切换效果。代码如下：
实现效果
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> <style type="text/css"> .lunbo{ width: 900px; height: 400px; margin:100px auto; } .lunbo img{ width: 100%; height:100%; } </style> </head> <body> <!--轮播图模块 --> <div class="lunbo"> <img id="lunbo_img" class="lazy" data-src="./pic/img3.jpeg" > </div> <!-- Js代码 --> <script> var index = 1; function lunbo(){ index ++ ; //判断index是否大于3 if(index > 3){ index = 1; } //获取img对象 var img = document.getElementById("lunbo_img"); img.class="lazy" data-src = "./pic/img"+index+".jpeg"; } //2.定义定时器 setInterval(lunbo,2000); background-size:100% 100%; } </style> </head> <body> <div class="lunbo"> </div> <script type="text/javascript"> var index = 1; function lunbo(){ index ++ ; //判断number是否大于3 if(index > 3){ index = 1; } //获取img对象 var img = document.getElementsByClassName("lunbo")[0]; img.style.background = "url(pic/img"+index+".jpeg)"; img.style.backgroundSize="100% 100%"; } //2.定义定时器 setInterval(lunbo,3000); </script> </body></html>Js实现轮播图03
本轮播图的实现，首先通过CSS代码将全部存放图片的li标签通过opacity属性设置为0来隐藏不显示， 通过js代码使用定时器不断调用类active突出显示li标签，同时隐藏兄弟li标签，再通过index++来实现切换循环显示的效果，当点击两边的按钮时，调用index++所在的方法实现切换的效果，没有复杂的算法，一点点基础一看代码就会学会，请大家参考。
实现效果
HTML代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!--引入CSS代码--> <link rel="stylesheet" type="text/css" href="./css/index.css" /> <!--引入Js代码--> <script class="lazy" data-src="./js/index.js"></script> <title>Js实现轮播图</title> </head> <body> <div class="lunbo"> <div class="content"> <ul id="item"> <li class="item"> <a href="#" ><img class="lazy" data-src="img/pic1.jpg" ></a> </li> <li class="item"> <a href="#" ><img class="lazy" data-src="img/pic2.jpg" ></a> </li> <li class="item"> <a href="#" ><img class="lazy" data-src="img/pic3.jpg" ></a> </li> <li class="item"> <a href="#" ><img class="lazy" data-src="img/pic4.jpg" ></a> </li> <li class="item"> <a href="#" ><img class="lazy" data-src="img/pic5.jpg" ></a> </li> </ul> <div id="btn-left"><</div> <div id="btn-right">></div> <ul id="circle"> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> </ul> </div> </div> </body></html>CSS代码
*{ margin: 0; padding: 0;}a{ list-style: none;}li{ list-style: none;}.lunbo{ width: 100%;}.content{ width: 800px; height: 300px; margin: 20px auto; position: relative;}#item{ width: 100%; height: 100%; }.item{ position: absolute; opacity: 0; transition: all 1s; }.item.active{ opacity:1;}img{ width: 100%;}#btn-left{ width: 30px; height: 69px; font-size: 30px; color: white; background-color:rgba(0,0,0,0.4); line-height: 69px; padding-left:5px; z-index: 10; position: absolute; left: 0; top: 50%; transform: translateY(-60%); cursor: pointer; opacity: 0;}.lunbo:hover #btn-left{ opacity: 1;}#btn-right{ width: 26px; height: 69px; font-size: 30px; color: white; background-color:rgba(0,0,0,0.4); line-height: 69px; padding-left: 5px; z-index: 10; position: absolute; right: 0; top: 50%; cursor: pointer; opacity: 0; transform: translateY(-60%);}.lunbo:hover #btn-right{ opacity: 1;}#circle{ height: 20px; display: flex; position: absolute; bottom: 35px; right: 25px;}.circle{ width: 10px; height: 10px; border-radius: 10px; border: 2px solid white; background: rgba(0,0,0,0.4); cursor: pointer; margin: 5px;}.white{ background-color: #FFFFFF;}JS代码
window.onload=function(){var items=document.getElementsByClassName("item");var circles=document.getElementsByClassName("circle");var leftBtn=document.getElementById("btn-left");var rightBtn=document.getElementById("btn-right");var content=document.querySelector('.content');var index=0;var timer=null;//清除classvar clearclass=function(){ for(let i=0;i<items.length;i++){ items[i].className="item"; circles[i].className="circle"; circles[i].setAttribute("num",i); }}function move(){ clearclass(); items[index].className="item active"; circles[index].className="circle white";}//点击右边按钮切换下一张图片rightBtn.onclick=function(){ if(index<items.length-1){ index++; } else{ index=0; } move();}//点击左边按钮切换上一张图片leftBtn.onclick=function(){ if(index<items.length){ index--; } else{ index=items.length-1; } move();}//开始定时器，点击右边按钮，实现轮播timer=setInterval(function(){ rightBtn.onclick();},1500)//点击圆点时，跳转到对应图片for(var i=0;i<circles.length;i++){ circles[i].addEventListener("click",function(){ var point_index=this.getAttribute("num"); index=point_index; move(); })}//鼠标移入清除定时器，并开启一个三秒的定时器，使慢慢转动content.onmouseover=function(){ clearInterval(timer); timer=setInterval(function(){ rightBtn.onclick(); },3000)}//鼠标移出又开启定时器content.onmouseleave=function(){ clearInterval(timer); timer=setInterval(function(){ rightBtn.onclick(); },1500)}}感谢各位的阅读，以上就是“JS实现轮播图效果的方法有哪些”的内容了，经过本文的学习后，相信大家对JS实现轮播图效果的方法有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
