将列表项目滑出屏幕并在jquery中循环回来

时间:2015-08-18 03:50:13

标签: javascript jquery image slider jquery-animate

我正在尝试在网站底部设置徽标动画。我希望它们在屏幕左侧消失,然后循环并重新出现在屏幕的右侧。类似于自动收报机,但最后没有死白色空间。我可以使它几乎在jsfiddle中工作(除非它调整屏幕大小时调整),它在我的实际项目中根本不起作用。

http://jsfiddle.net/yoda_wookie/jm7w0jf8/1/

$(function(){
    var scroller = $('#logo-ticker div.footer-logo-slider');
    var scrollerContent = scroller.children('ul');
    scrollerContent.children().clone().appendTo(scrollerContent);
    var curX = 0;
    scrollerContent.children().each(function(){
        var $this = $(this);
        $this.css('left', curX);
        curX += $this.outerWidth(true);
    });
    var fullW = curX / 2;
    var viewportW = scroller.width();

    // Scrolling speed management
    var controller = {curSpeed:0, fullSpeed:2};
    var $controller = $(controller);
    var tweenToNewSpeed = function(newSpeed, duration)
    {
        if (duration === undefined)
            duration = 600;
        $controller.stop(true).animate({curSpeed:newSpeed}, duration);
    };

    // Pause on hover
    scroller.hover(function(){
        tweenToNewSpeed(0);
    }, function(){
        tweenToNewSpeed(controller.fullSpeed);
    });

    // Scrolling management; start the automatical scrolling
    var doScroll = function()
    {
        var curX = scroller.scrollLeft();
        var newX = curX + controller.curSpeed;
        if (newX > fullW*2 - viewportW)
            newX -= fullW;
        scroller.scrollLeft(newX);
    };
    setInterval(doScroll, 20);
    tweenToNewSpeed(controller.fullSpeed);
});

我还在学习jQuery并且真的在努力解决这个问题。任何帮助将不胜感激:)

0 个答案:

没有答案