-1

私はうまく機能するdivスライダーを持っています: http://jsfiddle.net/UqSFr/2/

基本的な機能は次のとおりです。

$("#NextButton").click(function(e) { 
e.preventDefault();
if ( $("#h_wrapper").is(':not(:animated)') && $("#NextButton").is(':not(:animated)') ) {
    var newMargin = CurrentMargin() - SlideWidth;
    $("#h_wrapper").animate({ marginLeft: newMargin }, SlideSpeed, function () { SetNavigationDisplay() }); 
}
});

クリック機能に加えて、タイマーを追加したいので、5 秒以内にクリックしないと次に移動します。

タイマーはクリック時にリセットする必要があります

最後に到達したら、最初の div に移動する必要があります (marginLeft = 0)

4

1 に答える 1

2

このコードを見てください

$(document).ready(function(e) {
    var index = 0;
    var count = $('#h_wrapper').children().length; // set this value dynamically

    var interval = setInterval(next, 1000); // create the interval

    // move to next slide
    function next() {
        index = (index + 1) % count;
        goto(index);
    }

    // move to previous slide
    function previous() {
        index = (index + count - 1) % count; // not too pretty, but it works
        goto(index);
    }

    // go to slide x
    function goto(x) {
        var margin = index * SlideWidth; // set offset by index + width

        $('#h_wrapper').stop().animate({ // stop cancels any running animations
            'margin-left': margin
        }, SlideSpeed, function(e) {
            SetNavigationDisplay();
        });
    }

    // set click handlers
    $("#NextButton").click(next);
    $("#PreviousButton").click(previous);
});

とても簡単です。インデックスを保存することで、次と前のオフセットを簡単に計算できます。アニメーション全体を別の関数に分割すると、コードは読みやすく理解しやすくはなりませんが、呼び出しも簡単になります。

于 2013-02-11T08:50:40.657 に答える