0

私のクライアントの Web サイト ( http://slnyaadev45.herokuapp.com/ ) では、上部に JS スライダーを使用しました。サイト全体で画像を連続的に移動します。Firefoxでは、完全に機能します。しかし、Google Chrome ではそうではありません。時々動作しますが、ページをリロードすると動作しなくなります。時々、それは働き始めます。次に、別のページへのリンクをクリックするだけでも機能します。しかし、リロードするとまた壊れます。この問題は、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

すべての画像のサイズが同じであるため、スクリプトのこの行に幅を追加しました。

curX += $this.width();

なので ：

curX += 224;
于 2013-02-16T02:14:50.170 に答える
0

要素間の距離は 4px であるため、各要素の「左」を前の要素の幅の合計と等しくなるように設定します。

また

position:absoluteのスタイルを削除しliて追加できますfloat:left

于 2013-02-11T13:53:19.800 に答える