0

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

2 回答 2

0

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

或者

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

于 2013-02-11T13:53:19.800 回答
0

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

curX += $this.width();

作为 ：

curX += 224;
于 2013-02-16T02:14:50.170 回答