在实现轮播图滚动时，用左右按钮控制滚动再点数字按钮就会出现白屏，只有数字按钮发生变化，而图片不发生变化
以下是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
<title>jquery轮播图</title>
<style>
*{
padding: 0%;
margin: 0%;
}
.uli{
width:1000px;
height:400px;
display: flex;
overflow: hidden;
}
.uli li>img{
position: relative;
left: 0px;
top: 0px;
height: 400px;
}
.uli li{
width:1000px;
height: 400px;
list-style:none;
}
#images{
width:1000px;
height: 400px;
left:0;
position:absolute;
}
.square{/*数字按钮格式*/
position: absolute;
right: 700px;
top: 400px;
}
.square span{
display: inline-block;
width: 26px;
height: 26px;
margin: 5px;
background-color: #fff;
text-align: center;
line-height: 26px;
cursor: pointer;
}
.square span.current{
background-color: #ebcde3;
color: #fff;
}
.left{/*左按钮格式*/
position: absolute;
top: 200px;
left: 8px;
color: #c06fad;
border-radius:2em;
background-color: #ebcde3;
cursor: pointer;
font-size: 40px
}
.right{/*右按钮格式*/
position: absolute;
top: 200px;
right: 8px;
color: #c06fad;
border-radius:2em;
background-color: #ebcde3;
cursor: pointer;
font-size: 40px;
}
</style>
</head>
<body>
<div id="scroller">
<div id="images">
<ul class="uli" >
<li><img id="img1" src="./ima/1.jpg"> </li>
<li><img src="./ima/2.jpg"> </li>
<li><img src="./ima/3.jpg"> </li>
<li><img src="./ima/4.jpg"> </li>
</ul>
</div>
<div class="square" id="square">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<div class="pa1">
<span class="left"><</span>
<span class="right">></span>
</div>
<script type="text/javascript">
$(function(){
slide();
timer=setInterval(function(){
autoloop();
},1000);
$("#scroller").hover(function () {
clearInterval(timer);
},
function () {
//当鼠标移出图片的时候继续动画
timer = setInterval(function () {
autoloop();
},3000);
})
});
// 写一个入口函数
$(function(){
// 设置图片的大小
var img = 1000;
// 设置索引为 0
var index = 0;
// 设置图片的数量的长度
var option = $('.uli>li img').length;
// 左边部分开始
$('.right').click(function(){
// 再点击事件里面执行回调函数
left();
})
// 函数名称 left
function left(){
// index的索引值为 0 当他小于图片的长度的时候 就让他执行 ++ option要执行减 1 否则会有一张空白的页面
if (index < option-1) {
index ++;
}else {
index = 0;
}
move();
}
// 左边部分结束
// 右边部分开始
$('.left').click(function(){
// 再点击事件里面执行回调函数
right();
})
function right(){
// index的索引值为 0 当他大于图片的长度的时候 就让他执行 --
if (index > 0) {
index--;
}else {
index = option-1;
}
move()
}
// right left函数里面都有 move 就等于你点击你的 index 索引的时候为多少数值就会有几个图片滑过 500 为时间
function move(){
var a = -index * img + 'px';
$('.uli li>img').animate({'left':a},3000)
}
})
function slide() {
$("#square span").click(function () {
//当前被点击的索引
var index = $(this).index();
// 当前被激活的颜色
$(this).addClass("current")
.siblings("span").removeClass("current");
//当前被点击的图片索引显示，其它的隐藏
$("#images li").eq(index).show().siblings("li").hide();
//记住当前被点击的图片，向右顺序轮播
loopIndex = index;
});
}
function autoloop() {
loopIndex++;
//边界判断
if ( loopIndex == $("#images li").length){
loopIndex = 0;
}
$("#square span").eq(loopIndex).addClass("current")
.siblings("span").removeClass("current");
$("#images li").eq(loopIndex).show().siblings("li").hide();
}
</script>
</body>
</html>
会出现白屏，只剩下按钮 没有照片了 ，please
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<title>jquery轮播图</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
/* 1.包裹的容器样式 */
.screen {
width: 500px;
height: 200px;
/* 设置一个包裹轮播图的盒子 并且设置固定宽高 超出部分 hidden */
overflow: hidden;
position: relative;
}
/* 2.轮播图列表的样式 */
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
/* li设置浮动使得 li在一排显示 */
float: left;
}
/* 定位属性 left */
.screen ul {
position: absolute;
left: 0;
top: 0px;
/* 要设置足够的宽容纳下所有的li(就是大于等于 所有li加起来的宽度) */
width: 3000px;
}
/* 3.导航点的样式 */
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
/* 4.导航点高亮效果 */
.all ol li.current {
background: yellow;
}
/* 5.左右按钮 */
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='all'>
<div class="screen" id="screen">
<ul id="ul">
<li><img src="ima/1.jpg" width="500" height="200" /></li>
<li><img src="ima/2.jpg" width="500" height="200" /></li>
<li><img src="ima/3.jpg" width="500" height="200" /></li>
<li><img src="ima/4.jpg" width="500" height="200" /></li>
<li><img src="ima/5.jpg" width="500" height="200" /></li>
<!-- 轮播图片需要追加一张图片和第一张一样的用来过渡 -->
<!-- 当轮播到这最后一张时，把定位的left属性设置为0px 回到第一张 由于是瞬间回到的 所以看不出特别的明显-->
<li><img src="ima/1.jpg" width="500" height="200" /></li>
</ul>
<!-- 导航点 -->
<ol>
<li class="current">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
</ol>
<!-- 左右按钮 -->
<div id="arr">
<span id="left"></span>
<span id="right">></span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
// 需求:
// 1.完成轮播图的布局(垂直)
// 2.左侧用于显示缩略图
// 3.图片自动切换(无缝衔接)
// 4.缩略图跟随切换
// 编码：
// 定义属性记录值
// 图片索引值
var index = 0;
// 导航点索引值
var square = 0;
// 定时器变量
var timer = null;
// 获取一张图片的宽，在变换left值的时候用
var width = $(".screen")[0].offsetWidth;
// console.log(width); // 测试能不能获取
// 轮播图片数量
var Ulen = $("#ul li").length;
// console.log(Ulen); //测试
// 导航点数量
var Clen = $(".screen ol li").length;
// console.log(Clen); //测试
// 编写函数 实现图片自动播放切换原理
var autoPlay = function () {
// 图片索引值自增
index++;
console.log(index);
// 判断，因为index是从0开始的（0-5），Ulen值为6，所以需要减 1
if (index > Ulen - 1) {
// 给index赋值切换回第2张，当索引值index到最后一张图片之后，已经马上跳回第一张了，但是肉眼感觉不出来
index = 1;
// 设置承载图片的容器ul的left为0 是第一张 这个是在过渡的时候瞬间回到第一张的
// 第一张和最后一张图片是一样的 所以不是特别看得出来
$("#ul").css("left", 0);
}
// 动画切换下一个图片，图片从左往右 所以left值是﹣的
// 索引值代表图片个数 width代表一张图片宽度,相乘就可以求出到第几张图片
$("#ul").animate({ left: -(index * width) }, 500)
// 导航点索引值自增
square++;
// 判断，当导航点索引值到最后一个点时，切换回第一个
if (square > Clen - 1) {
// 给square赋值0
square = 0;
}
// 切换小图边框高亮,给当前的square值设置高亮 其它的移除,
// 已经设置好样式 直接添加类名就行
$(".screen ol li").eq(square)
.addClass("current")
.siblings()
.removeClass("current");
}
// 测试
// autoPlay();
// 执行定时器函数,实现自动播放
timer = setInterval(function () {
autoPlay();
}, 1500);
// 鼠标移入移出导航点,hover方法,有两个函数,分别是鼠标移进去和移出来
$(".screen ol li").hover(
// 鼠标移入导航点停止执行动画
function () {
clearInterval(timer);
},
// 鼠标移出导航点继续执行动画
function () {
timer = setInterval(function () {
autoPlay();
}, 1500);
}
)
//点击导航点切换图片和导航点高亮
$(".screen ol li").bind("click", function () {
// this指向绑定点击事件的对象，获取的是点击哪一个的下标
var _index = $(this).index();
// console.log(index); // 测试输出
// 把获取的值分别赋给图片和导航点
index = _index;
square = _index;
// 高亮的导航点
$(".screen ol li").eq(square)
.addClass("current")
.siblings()
.removeClass("current");
// 显示的图片
$("#ul").animate({ left: -(index * width) }, 500)
})
// 左右按钮
// 左按钮
$("#left").on("click", function () {
// 判断定时器是否在执行，在执行的话取消定时器
if (timer) {
clearInterval(timer);
}
// 索引值自减
index--;
// 当索引值是在第一个的时候，值直接切换成最后一个，这里的最后一个不包括用来过渡和第一张一样的那张图片，因此index为 4
if (index < 0) {
index = 4;
// 切换到最后一张图片
$("#ul").css({ "left": "-2500px" });
}
// 当index >= 0 时 正常执行切换
$("#ul").animate({ left: -(index * width) })
// 导航点索引值自减
square--;
// 三目运算符判断是否 < 0
square = square < 0 ? 4 : square;
// 设置高亮
$(".screen ol li").eq(square)
.addClass("current")
.siblings()
.removeClass("current");
})
$("#right").on("click", function () {
if (timer) {
clearInterval(timer);
}
index++;
// 012345 当在最后一张图片时瞬间切换的第二张图片 index = 1
if (index > 5) {
index = 1;
// 跳回一张
$("#ul").css({ "left": "0px" });
}
$("#ul").animate({ left: -(index * width) })
square++;
square = square > 4 ? 0 : square;
$(".screen ol li").eq(square)
.addClass("current")
.siblings()
.removeClass("current");
})
})
</script>
</body>
</html>
感觉你可以不用这么复杂，你可以使用swiper的插件，只需要两个div 然后引入js和css就可以了，他那里有api可以让你实现这些功能