jquery - このスライドショーを自動的に回転させる方法

Question

http://jsfiddle.net/AndyMP/CkuKe/

美しく機能しますが、前/次がクリックされた場合のみです。同様に自動的に実行するように説得できますか?

Answer 1

どうぞ。クリック ハンドラーを 500 ミリ秒ごとに呼び出すことはほとんど正しかったのですがclearInterval 、最初の繰り返しの後でクリック ハンドラーを停止していました。

デモ

    /* home slide show */

var $slides = $('.slideshow_item');
var slide_pos = 0;
var slide_len = $('.slideshow_item').length;

$slides.filter(':gt(0)').hide();

slide_int = setInterval(function() {
    $('#next').click();
}, 500);

$('#next').click(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(500);
    $slides.eq(++slide_pos % slide_len).fadeIn(500);

    //clearInterval(slide_int);
});

$('#prev').click(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(500);
    $slides.eq(--slide_pos % slide_len).fadeIn(500);

    //clearInterval(slide_int);
});​

Answer 2

編集: #next/#prev をクリックした後に自動スライドするようにコードを更新しました。

注: をクリックする#next/#prevと、2 秒後に autoSlide が呼び出されます。

デモ

/* home slide show */

var $slides = $('.slideshow_item');
var slide_pos = 0;
var slide_len = $('.slideshow_item').length;
var slide_int = 0;

$slides.filter(':gt(0)').hide();

autoSlide();

function autoSlide() {
    slide_pos = 0;
    slide_int = setInterval(function() {
        $slides.eq(slide_pos % slide_len).fadeOut(500);
        $slides.eq(++slide_pos % slide_len).fadeIn(500);
    }, 500);
}

$('#next').click(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(500);
    $slides.eq(++slide_pos % slide_len).fadeIn(500);

    clearInterval(slide_int);
    setTimeout(autoSlide, 2000);
});

$('#prev').click(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(500);
    $slides.eq(--slide_pos % slide_len).fadeIn(500);

    clearInterval(slide_int);
    setTimeout(autoSlide, 2000);
});

---

#nextsetInterval 内にある 2 行のコードを追加するだけです。

デモ

slide_int = setInterval(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(500);
    $slides.eq(++slide_pos % slide_len).fadeIn(500);
}, 500);