1

こんにちは、単純な jQuery スライド ショーを作成しています。スライドの要件は単純です。スライドが左に向かって連続的に反転するだけです。オンラインで表示されるチュートリアルのほとんどは、かなり高度で凝ったものです。しかし、私はほとんど私が望んでいるものに出くわしました。

http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/index.php

しかし、問題は、画像が最後までスライドすると、最初の画像まで後方にスライドすることです。画像が最後までスライドされたときに、スライドが最初の画像に戻り続けるようにコードを変更する方法はありますか?

4

2 に答える 2

1

最後のスライドを最初のスライドに戻さずに再起動する必要がある場合は、Pushpesh の回答を少し変更することをお勧めします。

$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 900;
var lastSlideReached = false;

slides.wrapAll('<div id="slidesHolder"></div>');
slides.css({ 'float' : 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
slideShowInterval = setInterval(changePosition, speed);

function changePosition() {
    if( ! lastSlideReached ) {
        if(currentPosition == (numberOfSlides-1)) {
            lastSlideReached = true;
        } else {
            currentPosition++;
        }

        moveSlide();

    } else {                     
        resetSlide()
    }


}

function moveSlide() {
    $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
}

function resetSlide(){
    currentPosition = 0;
    $('#slidesHolder').css('marginLeft', currentPosition );
    lastSlideReached = false;

}

}); </p>

乾杯

于 2012-10-30T11:35:30.037 に答える
0

JavaScript を次のように変更してください。

更新:スライダーがスライドに到達したら、スライダーを元の位置にスライドさせて戻す必要があります。これは、関数slideLeftが最後のスライドに到達すると実現されます。

$(document).ready(function() {
    var currentPosition = 0;
    var slideWidth = 500;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 3000;
    var lastSlideReached = false;

    slides.wrapAll('<div id="slidesHolder"></div>');
    slides.css({ 'float' : 'left' });
    $('#slidesHolder').css('width', slideWidth * numberOfSlides);
    slideShowInterval = setInterval(changePosition, speed);

    function changePosition() {
        if( ! lastSlideReached ) {
            if(currentPosition == (numberOfSlides-1)) {
                lastSlideReached = true;

                            clearInterval( slideShowInterval );
                slideLeft();
            slideShowInterval = setInterval(changePosition, speed);
            } else {
                currentPosition++;
            }
        } else {
            if( currentPosition == 0 ) {
                lastSlideReached = false;
            } else {
                currentPosition--;
            }
        }

        moveSlide();
    }

    function moveSlide() {
         $('#slidesHolder').animate(
            {'marginLeft' : slideWidth*(-currentPosition)}
         );
    }

function slideLeft() {
    $('#slidesHolder').animate({'marginLeft' : 0});
    currentPosition = 0;
    lastSlideReached = false;
}
});

変数を追加var lastSlideReached = false;し、関数にいくつかの変更を加えましたchangePosition。

それが役に立てば幸い。

于 2012-10-30T10:24:45.043 に答える