1

我已经在 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);
}

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

4

2 回答 2

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)
}

演示：小提琴

于 2013-09-05T11:05:34.020 回答
0

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

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

更好的是设置一个超时，并在函数结束时设置另一个。这将（大约）每n毫秒运行一次函数。您可以每轮增加一个计数器，然后在达到 时将其重置slides.length。

例如

var counter = 0;

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

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

    // Show slide 'counter'

    setTimeout(handler, interval * 1000);
}

handler();
于 2013-09-05T11:03:50.747 回答