JS实现轮播图效果的3种简单方法
2023-06-30 10:26
本文实例为大家分享了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对象
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是否大于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 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);
};
};
代码可能写的不是很好，存在很多不足，欢迎大家指点批评，我会努力去改正，有疑问欢迎留言，我会尽力去解答，谢谢大家花宝贵的时间来阅读这篇文章。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。