Javascript 图像滑块在 Chrome 中无法正常工作。图像堆叠。如何解决？答案

【问题标题】：The Javascript Image Slider is not working well inside Chrome. Images stack up. How to fix it?Javascript 图像滑块在 Chrome 中无法正常工作。图像堆叠。如何解决？
【发布时间】：2013-02-11 13:47:41
【问题描述】：

在我客户的网站 (http://slnyaadev45.herokuapp.com/) 中，我在顶部使用了一个 JS 滑块。它将在整个站点中连续移动图像。在 Firefox 中，它可以完美运行。但在谷歌浏览器中，它没有。有时它可以工作，但如果我重新加载页面，它就会停止工作。有时，它开始起作用。然后，如果我只是单击指向另一个页面的链接，它仍然可以工作。但如果我重新加载，它会再次中断。 Android的默认浏览器也存在问题。出了什么问题？如何解决？

PS : 该网站是使用 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);
});

【问题讨论】：

标签： javascript ruby-on-rails ruby-on-rails-3.2

【解决方案1】：

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

或

li的样式可以去掉position:absolute，添加float:left

【讨论】：

如果我添加 float:left，它会冻结动画。它不会滑动！
设置左侧位置怎么样？？
我刚刚检查过... javascript 计算并设置左值。在 Firefox 中，它可以工作，但在 Chrome 中，“左”值被搞砸了！
我刚刚添加了 JS :)
$this.css('left', curX+'px'); //写成

【解决方案2】：

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

curX += $this.width();

作为：

curX += 224;

【讨论】：