JS实现轮播图的三种简单方法。

article/2025/11/10 11:40:48

Js实现轮播图01

实现思路
这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的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" src="./pic/img3.jpeg" ></div><!-- Js代码 --><script>var index = 1;function lunbo(){index ++ ;//判断index是否大于3if(index > 3){index = 1;}//获取img对象var img = document.getElementById("lunbo_img");img.src = "./pic/img"+index+".jpeg";}//2.定义定时器setInterval(lunbo,2000);/*切记定时器里调用lunbo方法不能加(),setInterval(lunbo,2000);如果加()会执行lunbo（）方法，而导致定时器没用。</script></body>
</html>

Js实现轮播图02

实现思路
这可能是轮播图最简单点的实现之一，通过改变background的图片链接来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变background属性里面的url（）图片链接的名字来实现切换效果。代码如下：
实现效果
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>轮播图实现02</title><style>body{margin: 0;padding: 0;}.lunbo{width:100%;height:720px;background-image: url(pic/img1.jpeg);/*背景图片*/background-size:100% 100%; }</style></head><body><div class="lunbo"></div><script type="text/javascript">var index = 1;function lunbo(){index ++ ;//判断number是否大于3if(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 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 src="img/pic1.jpg" ></a></li><li class="item"><a href="#"><img src="img/pic2.jpg" ></a></li><li class="item"><a href="#"><img src="img/pic3.jpg" ></a></li><li class="item"><a href="#"><img src="img/pic4.jpg" ></a></li><li class="item"><a href="#"><img 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;//清除class
var clearclass=function(){for(let i=0;i<items.length;i++){items[i].className="item";circles[i].className="circle";circles[i].setAttribute("num",i);}
}
/*只显示一个class*/
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)
}
}

代码可能写的不是很好，存在很多不足，欢迎大家指点批评，我会努力去改正，有疑问欢迎留言，我会尽力去解答，谢谢大家花宝贵的时间来阅读这篇文章。