0

ヒント付きの短いインタラクティブなチュートリアルのように使用している表示および非表示の div フェード ループがあります。div を順番に循環させることができます。ただし、ループを一時停止する各ヒント内に一時停止ボタンを追加して、再開できるようにしたいと思います。その機能をスクリプトに追加するにはどうすればよいですか?

これが私のjsです：

$(document).ready(function(){
fadeLoop()
function fadeLoop() {

    var counter = 0,
        divs = $('.fader').css('visibility','visible').hide(),
        dur = 100;

    function showDiv() {
        $("div.fader").fadeOut(dur) // hide all divs
            .filter(function(index) {
                return index == counter % divs.length;
            }) // figure out correct div to show
            .delay(dur) // delay until fadeout is finished
            .fadeIn(dur); // and show it
        counter++;
    }; // function to loop through divs and show correct div
    showDiv(); // show first div    
    return setInterval(function() {
        showDiv(); // show next div
    }, 4 * 1000); // do this every 4 seconds    
};

$(function() {
    var interval;

    $("#start").click(function() {
        if (interval == undefined){
            interval = fadeLoop();
            $(this).val("Stop");
        }
        else{
            clearInterval(interval);
            $(this).val("Start");
            interval = undefined;
        }
    });
});
});

そして、ここに私のフィドルがあります：更新されたフィドル

4

1 に答える 1

1

グローバル変数window.iをカウンターとして使用して解決しました

function fadeLoop() {

    var divs = $('.fader').hide(),
        dur = 200;

    function showDiv() {
        divs.fadeOut(dur) // hide all divs
            .filter(function(index) {
                return index == window.i % divs.length;
            }) // figure out correct div to show
            .delay(dur) // delay until fadeout is finished
            .fadeIn(dur); // and show it
        window.i++;
    }; // function to loop through divs and show correct div
    showDiv(); // show first div    
    return setInterval(function() {
        showDiv(); // show next div
    }, 1 * 1000); // do this every 5 seconds    
};

$(function() {
    var interval;
    window.i = 0;

    $("#start").click(function() {
        if (interval == undefined){
            interval = fadeLoop();
            $(this).val("Stop");
        }
        else{
            clearInterval(interval);
            $(this).val("Start");
            interval = undefined;
        }
    });
});
于 2013-02-05T18:44:53.180 に答える