我是如何去了解jquery的(七),案例之不间断滚动

我是如何去了解jquery的(七),案例之不间断滚动

作者：田想兵 博客地址:http://www.cnblogs.com/tianxiangbing

最近经常被人打击说我js能力太差，连json格式都不懂，还有问我json是谁提出来的这种问题我也无法解答，好吧，我承认，我很烂，所以我还是孤芳自赏呗，继续我的历程吧，让打击来得更猛烈些吧！草。

本文案例请点击这里!

今天在说到不间断滚动时，先回顾下上一篇最后提出的问题，什么？上一篇有什么问题你不知道，那赶紧去看一下，在《我是如何去了解jquery的(六),案例之幻灯片轮换》里，我有提到说，如果我们希望在幻灯片里加一些动画效果怎么办呢？我说我有做出一个滚动的效果，不知道你有没有在案例demo里看到，在左上角有一个按钮，点击后，会创建一个滚动的轮换效果。请看下图:

这个图片有点糊，将就下吧，但是这个，我们越看就越像今天要讲的内容，因为你如果把容器拉宽一点，就是一个横向的滚动图片了，所以我们看下这个例子是怎么完成了是很有必要的。首先，我点击按钮，克隆了一个与幻灯片一模一样的东东，然后，让里面的内容横向排布，显示隐藏的代码换成动画滚动就完成了，请看下面的代码：

$("#addList").click(addList);

    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才会起作用。最后的代码如下：

 $(function(){

    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。