1

私はjQueryで独自のスライドショーを実装しました。最初の1回の反復で問題なく機能しています。関数がすべての画像の反復を完了したときです。 .

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

イメージごとに 1 つずつ、将来のタイムアウトを設定しています。これを機能させ続ける唯一の方法は、別のタイムアウトをslides.length * interval * 1000設定してタイムアウトを再設定することです。タイムアウトが多い。

これは特に良い方法ではありません。タイムアウトは正確ではなく、特に長時間実行する場合は、完全に正確に整列しません。

1 つのタイムアウトを設定し、関数の最後に別のタイムアウトを設定することをお勧めします。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 に答える