有联系的标识变量的变化一定要同步
在说这两个之前先说一个在做轮播图时，逻辑处理的一个思路的错误。在做轮播图中，我又两个变量来记录轮播图的变化的情况的，一个是img_index,用来记录当前的图片，一个是left_index,用来记录向左偏移的距离，如图：
我在最后一张，和第一张之间的跳转有一个过渡，实现的思路就是前后两端，各插入后前两端的两张图片，在过渡的时候，先也是正常地滚动一张图片的距离，在滚动动画结束后，在设置img_index,和left_index为最后一张或第一张的值，并将样式应用上去（直接用css,此处不能有过渡）。这样的做法在用户点击速度不快的时候，完美实现视觉效果上的圆环轮播。但是点击快的时候，过了尽头(31往右，1王左)，就会出现空白，left的值设置到了没有图片的区域。后面我才发现原因是img_index和left_index在尽头的时候，变化不同步，一个是直接变化，一个是放在animate的回调函数里面变化的。导致点击速度过快的时候，回调函数还没有执行(left_index还没有变化)，img_index已经变化了好几次，等到left_index变化（回调函数执行的时候），img_index和left_index已经不同步了。代码如下:
$(".mid-img>.to-right").on("click", function () {
//变化偏移量和图片index
if(self.img_index==self.img_num){
//此处是当图片为最后一张的时候的时候，改变是不一样的
self.left_index=self.left_index-1004;
var index_temp=0+2;
self.img_index=0;
$(".go_span:first").stop().animate({left: self.left_index+"px"},300,function(){
//这个做法可取么？？？如果使用到stop来停止函数的话，这个是不可取的，因为只要点击了，就一定要有位移
//这个是位移后立马变回的。s
//这个是位移后立马变回的。
self.left_index=(0-index_temp)*1004;
$(".go_span:first").css({left:self.left_index+"px"});
});
$(".index-header>li:eq("+self.img_index+")").addClass("li-red-bg");
$(".index-header>li:eq("+self.img_index+")").siblings().removeClass("li-red-bg");
//修改标题的文字------------------
var title=$(".go_span>a:eq("+index_temp+")").prop("title");
$(".mid-img>.bottom-text").text(title);
}else {
self.img_index=self.img_index+1;
self.left_index=self.left_index-1004;
self.go();
}
});
吧这个错误的思路修正就是，吧img_index的变化也放进animate的回调函数里面。：代码如下：
//给向右移动添加事件
$(".mid-img>.to-right").on("click", function () {
//变化偏移量和图片index
if(self.img_index==self.img_num){
//此处是当图片为最后一张的时候的时候，改变是不一样的
self.left_index=self.left_index-1004;
var index_temp=0+2;
$(".go_span:first").stop().animate({left: self.left_index+"px"},300,function(){
//这个做法可取么？？？如果使用到stop来停止函数的话，这个是不可取的，因为只要点击了，就一定要有位移
//这个是位移后立马变回的。s
//这个是位移后立马变回的。
self.left_index=(0-index_temp)*1004;
self.img_index=0;
$(".go_span:first").css({left:self.left_index+"px"});
$(".index-header>li:eq("+self.img_index+")").addClass("li-red-bg");
$(".index-header>li:eq("+self.img_index+")").siblings().removeClass("li-red-bg");
});
//修改标题的文字------------------
var title=$(".go_span>a:eq("+index_temp+")").prop("title");
$(".mid-img>.bottom-text").text(title);
}else {
self.img_index=self.img_index+1;
self.left_index=self.left_index-1004;
self.go();
}
});
总结就是，如果有两个标识变量，他们是有联系的，他们的变化一定要同步，同步的时间应该是相同的，不要一个放在回调函数里面，一个放在回调函数外面，因为回调函数不确定什么时候能够执行（有肯会被延迟或中断）。
在做这个轮播图，还遇到jquery中的stop()和animate()中的回调函数一齐出现时引发的现象，且看下回，当stop()遇到animate的回调函数。
