jquery - 如何让这个幻灯片自动旋转

Question

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

它工作得很好，但只有在点击上一个/下一个时。可以说服它自动运行吗？

Answer 1

编辑：单击#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);
});

---

只需#next在 setInterval 中添加 2 行代码即可。

演示

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

Answer 2

干得好。您每 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);
});​