3

jqueryを使用して画像を前後にスライドさせたり、単に移動したりするのに助けが必要です。現在、最後の要素までスライドし、最初の div に急いで戻り、再び開始しますが、まったく美しくありません。それを行うには関数をコールバックする必要があることはわかっていますが、間違いが続きます。前もって感謝します、これは以下の私のjqueryコードです

$(document).ready(function() {
    var currentPosition = 0;
    var slideWidth = 190;
    var slides = $('.slider_move');
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 5000;

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

    function changePosition() {
        if(currentPosition == numberOfSlides - 1) {
            currentPosition = 0;
        } else {
            currentPosition++;
        }
        moveSlide();
    }                   
    function moveSlide() {
            $('#slidesHolder')
              .animate({'marginLeft' : slideWidth*(-currentPosition)});
    }
});​
4

1 に答える 1

2

それ以外の：

if(currentPosition == numberOfSlides - 1) {
    currentPosition = 0;
} else {
    currentPosition++;
}

最初のスライドを最後まで移動する必要があります (同時にコンテナの位置を調整します)。

if (currentPosition > 0) {
    $('#slidesHolder').css('marginLeft',0)
        .children().first().appendTo('#slidesHolder');
} else {
    currentPosition += 1;
}

http://jsfiddle.net/mblase75/qatry/

または、全体をもう少し最適化するには、currentPosition変数とmoveSlideサブ関数を削除して、.animateメソッドでコールバックを使用するだけです。

function changePosition() {
    $('#slidesHolder').animate({
        'marginLeft': 0-slideWidth
    }, function() {
        $('#slidesHolder').css('marginLeft', 0)
            .children().first().appendTo('#slidesHolder');
    });
}

http://jsfiddle.net/mblase75/8vaCg/

于 2012-08-28T15:12:12.367 に答える