JS实现轮播图优化版（实现翻页功能）-CSDN博客实现了手动翻页，但是从最后一页到第一页的切换或者从第一页到最后一页的切换会和其它切换不一样，需要修改。核心是在首页前加尾页（方便起见一下这个尾页称为伪尾页）、在尾页前加上首页（伪首页），利用首页->伪尾页、尾页->伪首页实现动画效果，在完成后立刻切换到真正的尾页和首页。
HTML+CSS：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/轮播图.js" defer></script><style>* {padding: 0;margin: 0;}img {width: 200px;}.container {width: 800px;height: 500px;margin: 100px auto;position: relative;overflow: hidden;}.container .imgbox {width: 4000px;height: 100%;display: flex;position: absolute;left: -800px;}.container .imgbox li {list-style: none;width: 800px;}.container .imgbox li img {width: 100%;object-fit: cover;}.container .btn {position: absolute;width: 750px;height: 50px;margin: 200px 25px;display: flex;justify-content: space-between;align-items: center;}.container .btn li {list-style: none;width: 50px;height: 50px;background: rgba(255, 255, 255, 0.5);text-align: center;line-height: 50px;border-radius: 25px;cursor: pointer;}.page {position: absolute;width: 100%;margin-top: 460px;display: flex;justify-content: center;}.page li {list-style: none;background: rgba(255, 255, 255, 0.5);margin: 0 3px;padding: 3px 5px;cursor: pointer;font-size: 14px;}.page .current {background: rgba(27, 114, 226, 0.5);color: #fff;}</style>
</head><body><div class="container"><ul class="imgbox">//在首页前加尾页、在尾页前加首页<li><img src="img/轮播图3.jfif" alt=""></li><li><img src="img/轮播图1.jfif" alt=""></li><li><img src="img/轮播图2.jfif" alt=""></li><li><img src="img/轮播图3.jfif" alt=""></li><li><img src="img/轮播图1.jfif" alt=""></li></ul><ul class="btn"><li class="left"><</li><li class="right">></li></ul><ul class="page"><li class="current">1</li><li>2</li><li>3</li></ul></div>
</body></html>var imgbox = document.querySelector(".imgbox")
var left_btn = document.querySelector(".left")
var right_btn = document.querySelector(".right")
var page_item = document.querySelectorAll(".page li")imgbox.style.left = "-800px"//初始化变成-800px，因为此时第一页的位置放上最后一页
var oldpage=1
var flag=0//防止定时器太多导致轮播速度太快//轮播切换的核心方法
var change = function(offset){//目标位置 var position=parseInt(imgbox.style.left)+offset//分步走，以此定时器实现过度动画效果var step = offset/100var timer1 = setInterval(function(){imgbox.style.left = (parseInt(imgbox.style.left)+step)+"px"if (parseInt(imgbox.style.left) == position) {//定时器停止clearInterval(timer1)}if (parseInt(imgbox.style.left)==0) {imgbox.style.left="-2400px"//在利用首页->伪尾页实现动画后切换到真正的尾页}if (parseInt(imgbox.style.left)==-3200){imgbox.style.left="-800px"//在利用尾页->伪首页实现动画后切换到真正的尾页}}, 10)
}//上一页切换
left_btn.onclick=function(){if(flag==0){//加上判断语句change(800)//页码变化oldpage--highlight()flag = 1setTimeout(function(){flag=0}, 2000)}
}//下一页切换
right_btn.onclick = function() {if (flag==0){//加上判断语句change(-800)//页码变化oldpage++highlight()flag = 1setTimeout(function() {flag = 0}, 2000)}
}//自动切换
//timer定时器标志变量
var timer = setInterval(right_btn.onclick, 4000)//避免手动自动冲突
left_btn.onmouseenter = function() {clearInterval(timer)
}
right_btn.onmouseenter = function() {clearInterval(timer)
}
left_btn.onmouseleave = function() {timer = setInterval(right_btn.onclick, 4000)
}
right_btn.onmouseleave = function() {timer = setInterval(right_btn.onclick, 4000)
}//页码样式切换函数
var highlight = function() {if (oldpage > 3) {oldpage = 1} else if (oldpage < 1) {oldpage = 3}for (var i = 0; i < page_item.length; i++) {page_item[i].className = ""if (i == oldpage - 1) {page_item[i].className = "current"}}
}//任意页码切换
for (var i = 0; i < page_item.length; i++) {page_item[i].onclick = function() {//图片切换change((oldpage - this.innerText) * 800)oldpage = this.innerText//样式切换highlight()}//鼠标悬停时停止定时器page_item[i].onmouseenter = function() {clearInterval(timer)}//鼠标离开开始定时器page_item[i].onmouseleave = function() {timer = setInterval(right_btn.onclick, 4000)}
}