我是如何去了解jquery的(七),案例之不间断滚动
我是如何去了解jquery的(七),案例之不间断滚动
作者：田想兵 博客地址:http://www.cnblogs.com/tianxiangbing
最近经常被人打击说我js能力太差，连json格式都不懂，还有问我json是谁提出来的这种问题我也无法解答，好吧，我承认，我很烂，所以我还是孤芳自赏呗，继续我的历程吧，让打击来得更猛烈些吧！草。
本文案例请点击这里!
今天在说到不间断滚动时，先回顾下上一篇最后提出的问题，什么？上一篇有什么问题你不知道，那赶紧去看一下，在《我是如何去了解jquery的(六),案例之幻灯片轮换》里，我有提到说，如果我们希望在幻灯片里加一些动画效果怎么办呢？我说我有做出一个滚动的效果，不知道你有没有在案例demo里看到，在左上角有一个按钮，点击后，会创建一个滚动的轮换效果。请看下图:
这个图片有点糊，将就下吧，但是这个，我们越看就越像今天要讲的内容，因为你如果把容器拉宽一点，就是一个横向的滚动图片了，所以我们看下这个例子是怎么完成了是很有必要的。首先，我点击按钮，克隆了一个与幻灯片一模一样的东东，然后，让里面的内容横向排布，显示隐藏的代码换成动画滚动就完成了，请看下面的代码：
function addList(){
var temp=$(".focusPic:eq(0)").clone();
//$("body").append(temp);
temp.appendTo("body")
temp.find(".focus_tab .normal").show();
temp.css({"overflow":"hidden","margin-left":"350px"});
temp.find(".focus_tab").css({"position":"relative"})
temp.find(".focus_tab .normal").css("margin-right","10px");
var itemWidth=temp.find(".focus_tab .normal").width()+10;
temp.find(".focus_tab").width(itemWidth*imgCount);
var curIndex=0;
function play(){
curIndex++;
if(curIndex>=imgCount){
curIndex=0;
}
temp.find(".sidePic > li:eq("+curIndex+")").click();
}
var startIndex=0;
setInterval(play,2000);
temp.find(".sidePic li").click(function(){
$(this).siblings(".on").removeClass("on");
$(this).addClass("on")
curIndex=$(this).index();
var step = startIndex-curIndex;//步长，移动了多少张图片
console.log(step);
temp.find(".focus_tab").animate({left:step*itemWidth+"px"},"slow");
});
}
这里又多了几个没见过的方法，clone就是复制前面查询出的jquery对象，如果参数是.clone(true),那就会把里面的dom节点的事件方法都复制出来，appendTo是把前面的对象追加到后面的参数对象里面，相反的就是append，他们的区别就是以谁为主，都是追加到尾部里，还有类似的一些方法，如after、before等。相关的可以查阅API了解。然后我计算了每项的宽度，把总宽度赋给了二级容器，这样它们就可以横着摆放了。play方法和前面的幻灯片一样，都是改变的当前索引值，最后的运动是使用的animate，里面的第一个参数是传说中的json格式，这个我也不懂，问淘宝的吧，他们知道json是谁发明的。这里加了一个新的变量startIndex=0；这是二级容器的起始位置，然后计算运动后的偏移量，赋给animate这个方法就行了。第二个参数是时间，还有第三第四个参数，可以看下API。
这样，幻灯片的滚动效果就完成了，你可以点击这里查看效果，记得点击左上角的按钮才会创建。这样，所谓的不间断滚动，就冒似不成问题了，唯一的问题是怎么让它不间断，这里用到比较多的一种解决方案是：复制出多一倍的内容，当第一次滚动完结时跳回起始位置，这样肉眼是看不出来有跳回去的。然后动画，我们也不需要使用animate这个方法了，我们用定时器来完成，只要修改样式的left位置就可以了，记得把二级容器的position改成relative或absolute，这样left才会起作用。最后的代码如下：
var itemWidth=$(".focus_tab > .normal").width()+10;
var sumWidth=itemWidth*$(".focus_tab > .normal").length;
var temp=$(".focus_tab > div").clone();
temp.appendTo(".focus_tab");
$(".focus_tab").width(sumWidth*2);
var i=0;
setInterval(play,18);
function play(){
//$(".focus_tab").offset({left:i,top:$(".focus_tab").offset().top});
$(".focus_tab").css("left",i)
i-=1;
//if(Math.abs($(".focus_tab").offset().left)>=sumWidth)
if(Math.abs($(".focus_tab").css("left"))>=sumWidth)
i=0;
}
});
这次代码是不是更少了，这就是不间断滚动了，你可以再给它加个鼠标移上去清除定时器，移出时还原，所以反而我感觉上一节会更复杂些。效果请看下面的gif动画：
QQ截出来的动画也就这个效果了，所以还是看实际页面吧，本文案例请点击这里!如果你有任何的疑问都不要来问我，请重复阅读本文，或加入Q群70210212。
