JS实现轮播图效果的3种简单⽅法
本⽂实例为⼤家分享了3种⽅法实现JS轮播图效果的具体代码，供⼤家参考，具体内容如下
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是否⼤于3
if(index > 3){
index = 1;
}
//获取img对象
实现特效的代码jsvar img = ElementById("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>
<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是否⼤于3
if(index > 3){
index = 1;
}
//获取img对象
var img = ElementsByClassName("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 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代码
var ElementsByClassName("item"); var ElementsByClassName("circle"); var ElementById("btn-left");
var ElementById("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";
}
//点击右边按钮切换下⼀张图⽚
if(index<items.length-1){
index++;
}
else{
}
move();
}
//点击左边按钮切换上⼀张图⽚
if(index<items.length){
index--;
}
else{
index=items.length-1;
}
move();
}
/
/开始定时器，点击右边按钮，实现轮播
timer=setInterval(function(){
},1500)
//点击圆点时，跳转到对应图⽚
for(var i=0;i<circles.length;i++){
circles[i].addEventListener("click",function(){
var point_Attribute("num");
index=point_index;
move();
})
}
//⿏标移⼊清除定时器，并开启⼀个三秒的定时器，使慢慢转动
clearInterval(timer);
timer=setInterval(function(){
},3000)
}
//⿏标移出⼜开启定时器
clearInterval(timer);
timer=setInterval(function(){
},1500)
}
}
代码可能写的不是很好，存在很多不⾜，欢迎⼤家指点批评，我会努⼒去改正，有疑问欢迎留⾔，我会尽⼒去解答，谢谢⼤家花宝贵的时间来阅读这篇⽂章。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论