javascript实现轮播图原理：先显示第一张图片，其它图片隐藏。点击下一个，就显示下一张图片，其它图片隐藏。
轮播图原理很简单，下面我们用代码来实现一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript实现轮播图</title>
<style>
body{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 400px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.box .item{
width: 100%;
height: 100%;
display: none;
}
.box .item.active{
display: block;
}
.box .item img{
max-width: 100%;
max-height: 100%;
}
.prev{
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
cursor: pointer;
}
.next{
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
cursor: pointer;
}
ul{
width: 100%;
list-style: none;
position: absolute;
bottom: 10px;
text-align: center;
margin: 0;
padding: 0;
}
ul li{
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
border-radius: 100%;
background: #fff;
cursor: pointer;
}
ul li.active{
background: #007aff;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="item active">
<img src="1.jpg" alt="">
</div>
<div class="item">
<img src="2.jpg" alt="">
</div>
<div class="item">
<img src="3.jpg" alt="">
</div>
<div class="item">
<img src="4.jpg" alt="">
</div>
<div class="item">
<img src="5.jpg" alt="">
</div>
<div class="prev" id="prev">
<img src="https://www.zhiboblog.com/wp-content/uploads/2023/08/left.png" alt="">
</div>
<div class="next" id="next">
<img src="https://www.zhiboblog.com/wp-content/uploads/2023/08/right.png" alt="">
</div>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var items = document.getElementsByClassName('item');
var currentindex = 0;
var lis = document.querySelectorAll('li');
//切换图片
function changeImage(index){
items[index].classList.add('active');
lis[index].classList.add('active');
for(var i=0;i<items.length;i++){
if(i != index){
items[i].classList.remove('active');
lis[i].classList.remove('active');
}
}
}
//给小圆点添加点击事件
lis.forEach(function(li, index) {
li.addEventListener('click', function() {
changeImage(index);
});
});
//切换下一张图片
document.getElementById('next').onclick = function(){
if(currentindex == items.length - 1){
currentindex = 0;
}else{
currentindex++;
}
changeImage(currentindex);
};
//切换上一张图片
document.getElementById('prev').onclick = function(){
if(currentindex == 0){
currentindex = items.length - 1;
}else{
currentindex--;
}
changeImage(currentindex);
};
//添加定时器，定时轮播图片
setInterval(function(){
document.getElementById('next').click();
},2000);
// 当鼠标移动到图片上的时候停止定时器
document.getElementById('box').addEventListener('mouseover',function(){
clearInterval(timer);
});
// 当鼠标离开图片的时候恢复定时器
document.getElementById('box').addEventListener('mouseout',function(){
timer = setInterval(function(){
document.getElementById('next').click();
},2000);
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript实现轮播图</title>
<style>
body{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 400px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.box .item{
width: 100%;
height: 100%;
display: none;
}
.box .item.active{
display: block;
}
.box .item img{
max-width: 100%;
max-height: 100%;
}
.prev{
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
cursor: pointer;
}
.next{
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
cursor: pointer;
}
ul{
width: 100%;
list-style: none;
position: absolute;
bottom: 10px;
text-align: center;
margin: 0;
padding: 0;
}
ul li{
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
border-radius: 100%;
background: #fff;
cursor: pointer;
}
ul li.active{
background: #007aff;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="item active">
<img src="1.jpg" alt="">
</div>
<div class="item">
<img src="2.jpg" alt="">
</div>
<div class="item">
<img src="3.jpg" alt="">
</div>
<div class="item">
<img src="4.jpg" alt="">
</div>
<div class="item">
<img src="5.jpg" alt="">
</div>
<div class="prev" id="prev">
<img src="https://www.zhiboblog.com/wp-content/uploads/2023/08/left.png" alt="">
</div>
<div class="next" id="next">
<img src="https://www.zhiboblog.com/wp-content/uploads/2023/08/right.png" alt="">
</div>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var items = document.getElementsByClassName('item');
var currentindex = 0;
var lis = document.querySelectorAll('li');
//切换图片
function changeImage(index){
items[index].classList.add('active');
lis[index].classList.add('active');
for(var i=0;i<items.length;i++){
if(i != index){
items[i].classList.remove('active');
lis[i].classList.remove('active');
}
}
}
//给小圆点添加点击事件
lis.forEach(function(li, index) {
li.addEventListener('click', function() {
changeImage(index);
});
});
//切换下一张图片
document.getElementById('next').onclick = function(){
if(currentindex == items.length - 1){
currentindex = 0;
}else{
currentindex++;
}
changeImage(currentindex);
};
//切换上一张图片
document.getElementById('prev').onclick = function(){
if(currentindex == 0){
currentindex = items.length - 1;
}else{
currentindex--;
}
changeImage(currentindex);
};
//添加定时器，定时轮播图片
setInterval(function(){
document.getElementById('next').click();
},2000);
// 当鼠标移动到图片上的时候停止定时器
document.getElementById('box').addEventListener('mouseover',function(){
clearInterval(timer);
});
// 当鼠标离开图片的时候恢复定时器
document.getElementById('box').addEventListener('mouseout',function(){
timer = setInterval(function(){
document.getElementById('next').click();
},2000);
});
</script>
</body>
</html>
轮播图效果如下：
