Jqurey页面轮播点击事件的循环问题

[励志做个赚钱小能手]

这是一个点击侧边按键实现图片墙轮播的函数，这个函数是能实现的，但是我很不理解这样写的逻辑。下面第二张图才是按照我的理解的函数，但是按照我第二张图的理解确实现不了循环效果。

哪位好心的大神能帮我理一下这个函数的运行思路。难道不应该是先做if判断，再执行left偏移嘛？还有，为什么offset设成全局变量没有效果啊~

[励志做个赚钱小能手]

$(document).ready(function() {
var n = 1;
$("#arrowLeft").on("click", function() {
$(".imgList").css("left", -425 * n);
n++
if( n > 7){
n = 0
}
})
})

其实我知道这个简单的方法也能实现，但是就是不知道原理，为什么第一种方法不行？

[liusaint1992]

1.按照 你的写法

offset只会获取一次 left的值。就是最开始的时候的值。它只执行一次。然后就不会变化了。

而第一种把offset写到点击事件里面去，每次点击的时候重新 计算一次 css("left")的值。所以offset的值是会随着你的点击而变化的。


2.由于你的 offset 的值没有变化。
所以n可能一直等于1，于是left的值也一直会等于-425,在你看起来就是点起来没有反应了。


3.另外，第一种方法 是先移动图片，移动完计算left如果移动超过正常范围，再移动回 left 0。

而你的思路来代码可以写成这样（我没写全）
$().on("click",function(){
var offset = ....
if(offset < -2975){
.css("left",0);
n=1;
}else{
.css("left",-425*n);
n++;
}
。
但事实 上这样的话你可能忽略了一个问题。
比如我现在是 -2974.
那么按你的逻辑，它是可以再移动的。
移动的结果就是 -3000多了。

你可以试试看效果。

而第一种就是如果出现了移动到-3000多的情况 立马移动回初始位置去。所以要好那么一点。

[liusaint1992]

想了下，如果要先计算判断，在移动的话，你就计算一下，假如移动一次，移动之后的left值是多少。就是用当前的left值，加上或减去移动值，与边界值作比较。如果这个移动后的left值不在合适的范围内。就让left等于0，n等于1。回到起点。