无缝滚动 - jQuery写的无缝轮播图，刷新页面重新加载后有一个小问题？
本文介绍了无缝滚动 - 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");
}
}
})解决方案
错误很明显- -
一、来说说你说的:会先滑过1，2，3，4这四张图
var i = 0; //索引
for (var i = 1; i <= num - 1; i++) {
var li = "<li>" + i + "</li>";
$('.out ol').append(li);
}你没发现你的轮播索引i和for里面的i是一样的么，，这样i初始就是5了
然后你点一下left i--于是跑到最后一张你复制的图上去了
这篇关于无缝滚动 - jQuery写的无缝轮播图，刷新页面重新加载后有一个小问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
