jQuery写的无缝轮播图，刷新页面重新加载后有一个小问题？
问题：jQuery写的无缝轮播图，自动轮播、手动轮播、鼠标悬浮停止都正常。但是如果刷新页面，在第一次自动轮播之前直接点击后退按钮（也就是左边的“<”箭头），理论上应该是无缝轮播到最后一张图片（4）。现在的问题是它会先滑过1，2，3，4这四张图，到达第五张也就是和第一张重复的那张图，再点击一下才会轮播到4，之后才能正常轮播；如果刷新页面之后，第一个动作不是点击后退，而是让它自动轮播或者手动点击轮播，才能完美后退。
菜鸟第一次求教，哪位大神有空看看是什么问题？代码如下：
html
<!DOCTYPE html>
<html>
<head>
<title>无缝轮播</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="out">
<ul>
<li><a href="#"><img src="../img/1.jpg"></a></li>
<li><a href="#"><img src="../img/2.jpg"></a></li>
<li><a href="#"><img src="../img/3.jpg"></a></li>
<li><a href="#"><img src="../img/4.jpg"></a></li>
</ul>
<ol>
</ol>
<div class="left btn"><</div>
<div class="right btn">></div>
</div>
</body>
</html>js
$(function(){
var width=$('img').width(); //图片宽度
var timer=null; //定时器
var i=0; //索引
var clone=$('ul li').first().clone(); //复制第一个
$('ul').append(clone); //添加第一张图片到最后
var num=$('ul li').length; //初始化 添加数字按钮
for (var i = 1; i <=num-1; i++) {
var li="<li>"+i+"</li>";
$('.out ol').append(li);
}
$('.out ol li').eq(0).addClass('active');
$('ol li').on('click', function(event) { //手动点击
i=$(this).index();
$(this).addClass('active').siblings().removeClass("active");
$('ul').animate({
'left':-width*i,
})
});
autoPlay(); //调用自动轮播
$('.out').hover(function(){ //鼠标悬浮停止
clearInterval(timer);
},autoPlay);
$('.left').on('click', function() { //左按钮
i--;
move();
});
$('.right').on('click', function() { //右按钮
i++;
move();
});
function autoPlay(){ //自动轮播功能
timer=setInterval(function(){
i++;
move();
},3000)
}
function move(){ //运动函数
if (i>num-1) {
$('.out ul').css({
left:0
});
i=1;
}
if (i<0) {
$('.out ul').css({
left:-1600
});
i=num-2;
};
$('ul').stop().animate({'left':-width*i},1000); //图片运动
if (i>num-2) { //数字背景颜色变化
$('ol li').eq(0).addClass('active').siblings().removeClass("active");
}else{
$('ol li').eq(i).addClass('active').siblings().removeClass("active");
}
}
})如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
错误很明显- -
一、来说说你说的:会先滑过1，2，3，4这四张图
你没发现你的轮播索引i和for里面的i是一样的么，，这样i初始就是5了
然后你点一下left
i--于是跑到最后一张你复制的图上去了