ruby on rails-Javascript图像滑块在Chrome中运行不好.图像堆积在一起.如何修复

Question

在我客户的网站上(http://slnyaadev45.herokuapp.com/)，我在顶部使用了JS滑块。它将在网站上连续移动图像。在Firefox中，它可以完美地工作。但在谷歌浏览器中，情况并非如此。有时它可以工作，但如果我重新加载页面，它就会停止工作。有时，它开始起作用。然后，如果我只是点击一个链接到另一个页面，它仍然可以工作。但如果我重新加载，它会再次断裂。这个问题也存在于安卓系统的默认浏览器中。出了什么问题？如何修复？

附言：该网站是用Rails 3.2构建的。

javascript：

$(function(){
    var scroller = $('#scroller div.innerScrollArea');
    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.width();
    });
    var fullW = curX / 2;
    var viewportW = scroller.width();
    // Scrolling speed management
    var controller = {curSpeed:0, fullSpeed:1};
    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);
});

Answer 1

因为元素之间的距离是4px，所以设置每个元素的"左"等于之前元素的宽度总和

或

您可以为li的样式删除position:absolute，并添加float:left

Answer 2

因为我所有的图像都有相同的大小，所以我在脚本的这一行中添加了宽度：

curX += $this.width();

作为：

curX += 224;