如何在JavaScript中添加圖像以顯示暫停和播放圖標？

Question

我正在嘗試使用兩個圖像作為我的教程腳本的播放和暫停按鈕。 如何用兩個圖像替換JavaScript中的“開始”和“停止”？

這是我的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;
        }
    });
});
});

這是我的小提琴： 小提琴!!

Answer 1

不要更改元素的文本值，而是更改CSS類名。 有兩個不同的類，每個類使用背景圖像。

Answer 2

只需為標記中的圖像設置onclick事件，而不是按鈕。 然后你可以使用attr JQuery函數修改圖像：

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

我無法加載你的JSFiddle，但看到一些標記可能會有所幫助。

編輯：

我再次回來看看，JSFiddle現在似乎已經開始了。 標記底部的輸入應該是div或img標記。 如果您使用img標記，請使用上面的代碼修改click事件上的源圖像。

div可能會更好，因為您可以預加載背景圖像。 對於div，您可以使用兩個CSS類設置背景圖像：

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

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

然后你需要刪除start類並添加stop類，反之亦然：

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

如果您修改CSS停止選擇器並使其成為“.start.stop”，您甚至可以刪除並添加停止類，而不必擔心刪除和添加啟動類。