我是如何去了解jquery的(七),案例之不间断滚动
作者:田想兵 博客地址:http://www.cnblogs.com/tianxiangbing
最近经常被人打击说我js能力太差,连json格式都不懂,还有问我json是谁提出来的这种问题我也无法解答,好吧,我承认,我很烂,所以我还是孤芳自赏呗,继续我的历程吧,让打击来得更猛烈些吧!草。
本文案例请点击这里!
今天在说到不间断滚动时,先回顾下上一篇最后提出的问题,什么?上一篇有什么问题你不知道,那赶紧去看一下,在《我是如何去了解jquery的(六),案例之幻灯片轮换》里,我有提到说,如果我们希望在幻灯片里加一些动画效果怎么办呢?我说我有做出一个滚动的效果,不知道你有没有在案例demo里看到,在左上角有一个按钮,点击后,会创建一个滚动的轮换效果。请看下图:
![](https://images.cnblogs.com/cnblogs_com/tianxiangbing/animatepic.gif)
这个图片有点糊,将就下吧,但是这个,我们越看就越像今天要讲的内容,因为你如果把容器拉宽一点,就是一个横向的滚动图片了,所以我们看下这个例子是怎么完成了是很有必要的。首先,我点击按钮,克隆了一个与幻灯片一模一样的东东,然后,让里面的内容横向排布,显示隐藏的代码换成动画滚动就完成了,请看下面的代码:
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动画:
![](https://images.cnblogs.com/cnblogs_com/tianxiangbing/%E6%BB%9A%E5%8A%A8%E5%9B%BE.gif)
QQ截出来的动画也就这个效果了,所以还是看实际页面吧,本文案例请点击这里!如果你有任何的疑问都不要来问我,请重复阅读本文,或加入Q群70210212。