Question

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

Answer 1

修改：点击#next / #pref后，将代码更新为自动幻灯片。

注意：点击#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);
});

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

DEMO

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在第一次迭代后就停止了它。

<强> Demo

    /* 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);
});

如何让此幻灯片自动旋转

2 个答案: