Question

我已经在jQuery中实现了我自己的幻灯片放映，第一次迭代的事情正常工作，我被困住的是当函数完成迭代所有图像时，如何从第一次重新启动它并继续运行此过程一次又一次。

function startSlideShow(interval) {
var slides = $('#contain').children('div');
console.log(slides.length);
slides.each(function (i, v) {
    setTimeout(function () {
        var slide = $(v);
        console.log(i + "-" + v);
        $('#currentImage').attr('src', slide.find('img').attr('src')).fadeIn(interval * 100);
        $('#slideDesc').html(slide.find('span').html()).fadeIn(interval * 100);
    }, i * interval * 1000);
});

//startSlideShow(interval);
}

我尝试递归调用它但没有工作并挂起整个页面。

Answer 1

尝试

function startSlideShow(interval) {
    var slides = $('#contain').children('div');
    var idx = 0;
    setInterval(function(){
        var slide = slides.eq(idx++);
            $('#currentImage').attr('src', slide.find('img').attr('src')).fadeIn(interval * 100);
            $('#slideDesc').html(slide.find('span').html()).fadeIn(interval * 100);
            idx = idx % slides.length;
    }, 1000 * interval)
}

演示：Fiddle

Answer 2

您将在未来设置超时，每个图像一个。使其保持工作的唯一方法是在slides.length * interval * 1000中设置另一个超时以重新设置超时。很多超时。

这不是一种特别好的做事方式。超时不准确，并且不会完全准确排列，特别是如果你让它运行很长时间。

最好设置一个超时，并在功能结束时设置另一个超时。这将每n毫秒运行函数（大约）。您可以每次递增一个计数器，然后在达到slides.length时重置它。

E.g。

var counter = 0;

var handler = function() {
    counter += 1;

    if (counter == slides.length) { counter = 0; }

    // Show slide 'counter'

    setTimeout(handler, interval * 1000);
}

handler();

如何重置.each函数中的索引以一次又一次地调用它

2 个答案: