1

基本的なカルーセルタイプのslidshowを作成しましたが、それを機能させるには、次の関数を2回呼び出して、margin-leftプロパティを実際に0pxに設定する必要がありました。

$("#slide ul").stop().css('marginLeft', '0px');

私はjqueryを初めて使用するので、何が間違っているのか疑問に思いました。

全体はここで見つけることができますhttp://jsfiddle.net/xZBZK/

便宜上JavaScriptだけ：

var offset = 0;
var count;
var width = 500;
var height = 333;
var interval;

$(document).ready(function() {
    count = $("#slide ul").children().length;
    // Add the first image to the end so it loops.
    $("#slide ul").children().first().clone().appendTo("#slide ul");
    start();
});

function nextImage() {
    $("#slide ul").stop();
    offset+=width;
    if(offset / width == count) { 
        $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700, 'linear', resetImage);
    }
    $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700);
    return offset;
}

function resetImage() {
    $("#slide ul").stop().css('marginLeft', '0px');
    $("#slide ul").stop().css('marginLeft', '0px');
    offset = 0;
    //start();
}

function stop() {
    clearInterval(interval);
}

function start() {
    interval = setInterval(nextImage, 3000);
}

JQuery1.9.1を使用しています

4

1 に答える 1

2

2つのアニメーションをキューにロードしているためですか？

if(offset / width == count) { 
    $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700, 'linear', resetImage);
}
$("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700);

多分あなたが望む：

if(offset / width == count) { 
    $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700, 'linear', resetImage);
}else{
    $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700);
}

.stop()現在のアニメーションを停止するだけで、キューをクリアしないと思います。そのため、デフォルトではその前のアニメーションになります。

于 2013-03-26T20:02:15.503 に答える