问题遇到的现象和发生背景
在实现轮播图滚动时，用左右按钮控制滚动再点数字按钮就会出现白屏，只有数字按钮发生变化，而图片不发生变化
以下是我的代码
问题相关代码，请勿粘贴截图
<!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
