0

シンプルなページネーションでシンプルなjQueryフェージングカルーセルを作りたいです。
すべてがうまく機能します。しかし、NEXTボタンをクリックすると、カルーセルは毎回最初の項目に戻ります。

この問題を解決するにはどうすればよいですか?

フィドル

フィドルが古くなった場合は、私の HTML を参照してください。

<body>    
    <ul id="carousel">
        <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide1.jpg" width="960" height="375" alt="image 1" /></li>
        <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide2.jpg" width="960" height="375" alt="image 2"  /><li>
            <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide3.jpg" width="960" height="375" alt="image 3"  /></li>
            <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide4.jpg" width="960" height="375" alt="image 4"  /></li>
            <li class="is-showing" ><img src="http://aarontennyson.com/tutorials/demos/slide_show_fade/images/slide5.jpg" width="960" height="375" alt="image 5"  /></li>
    </ul>
<span class="prev">prev</span>
<span class="next">next</span>
</body>

およびスクリプト:

$(document).ready(function() {
    slideShow();
});

function slideShow() {
    var showing = $('#carousel .is-showing');
    var next = showing.next().length ? showing.next() : showing.parent().children(':first');

    showing.fadeOut(800, function() {
        next.fadeIn(800).addClass('is-showing');
    }).removeClass('is-showing');
    setTimeout(slideShow, 5000);

    $(".next").click(function() {
        showing.fadeOut(800, function() {
            next.fadeIn(800).addClass('is-showing');
        }).removeClass('is-showing');
    })
}​
4

2 に答える 2

2

それを理解するには、いくつかのコードを書き直す必要があります。繰り返しアクションを関数に分割します。

固定例

新しいスクリプト:

$(document).ready(function() {
    slideShow();
});

function slideShow() {
    var slides = $('#carousel li');
    var previousIndex = 0,
        currentIndex = 0,
        timer;
    slides.hide().removeClass('is-showing').eq(currentIndex).show().addClass('is-showing');

    function nextSlide() {
        previousIndex = currentIndex;
        if (currentIndex < slides.length - 1) currentIndex++;
        else currentIndex = 0;
        switchSlides();
    }

    function switchSlides() {
        slides.eq(previousIndex).removeClass('is-showing').fadeOut(300, function() {
            slides.eq(currentIndex).addClass('is-showing').fadeIn(300);
            autoRotate();
        });
    }

    function autoRotate() {
        clearTimeout(timer);
        timer = setTimeout(nextSlide, 5000);
    }

    autoRotate();
    $(".next").click(nextSlide);
}​
于 2012-10-07T14:39:55.687 に答える
1

フェードアウト中に「is-showing」クラスを削除するため、これらの 800 ミリ秒には「is-showing」クラスはありません。

showing.fadeOut(800, function() {
    next.fadeIn(800).addClass('is-showing');
}).removeClass('is-showing');

したがって、このコードに到達すると「現在のアイテム」がないため、ロジックに従って最初のアイテムに移動します

var showing = $('#carousel .is-showing');
var next = showing.next().length ? showing.next() : showing.parent().children(':first');
于 2012-10-07T14:41:52.603 に答える