0

チュートリアル スクリプトの再生ボタンと一時停止ボタンとして機能する 2 つの画像を使用しようとしています。JavaScript 内の "Start" と "Stop" を 2 つの画像に置き換えるにはどうすればよいですか?

ここに私のJavaScriptがあります:

$(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 7 seconds    
};

$(function() {
    var interval;

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

ここに私のフィドルがあります：フィドル!!

4

2 に答える 2

1

要素のテキスト値を変更する代わりに、CSS クラス名を変更します。それぞれが背景画像を使用する 2 つの異なるクラスを用意します。

于 2013-02-05T17:57:32.867 に答える
1

ボタンの代わりに、マークアップで画像の onclick イベントを設定するだけです。次に、 attr JQuery 関数を使用して画像を変更できます。

$(this).attr('src', '[path to my image]');

JSFiddle をロードできませんでしたが、マークアップを確認すると役立つでしょう。

編集：

もう一度確認したところ、JSFiddle は現在稼働しているようです。マークアップの下部の入力は、div または img タグのいずれかである必要があります。img タグを使用する場合は、上記のコードを使用してクリック イベントのソース イメージを変更します。

背景画像をプリロードできるので、div の方が良いかもしれません。div の場合、2 つの CSS クラスで背景画像を設定できます。

.start {
    background-image: url('start.png');
}

.stop{
    background-image: url('stop.png');
}

次に、開始クラスを削除して停止クラスを追加するか、その逆を行う必要があります。

$(this).removeClass('start');
$(this).addClass('stop');

CSS 停止セレクターを変更して「.start.stop」にすると、開始クラスの削除と追加について心配する代わりに、停止クラスを削除して追加することさえできます。

于 2013-02-05T18:00:09.100 に答える