Question

在我客户的网站（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);
});

Answer 1

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

OR

您可以移除position:absolute样式li，然后添加float:left

Answer 2

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

curX += $this.width();

as：

curX += 224;

Javascript Image Slider在Chrome中运行不佳。图像叠起来。怎么解决？

2 个答案: