如何在JavaScript中添加图像以显示“暂停并播放”图标

How do I add images inside my JavaScript to display Pause and Play icons?

本文关键字：暂停 播放 暂停并播放 图标 显示 JavaScript 图像 添加      更新时间：2023-09-26

我正在尝试使用两个图像作为教程脚本的播放和暂停按钮。如何将JavaScript中的"Start"answers"Stop"替换为两个图像？

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

这是我的小提琴：小提琴！！

与其更改元素的文本值，不如更改CSS类名。有两个不同的类，每个类使用一个背景图像。

只需为标记中的图像设置onclick事件，而不是按钮。然后您可以使用attrJQuery函数修改图像：

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

我无法加载您的JSFiddle，但看到一些标记可能会有所帮助。

编辑：

我再次查看了一下，JSFiddle现在似乎已经启动了。标记底部的输入应该是div或img标记。如果使用img标记，请使用上面的代码修改单击事件的源图像。

div可能更好，因为您可以预加载背景图像。在div的情况下，您可以使用两个CSS类设置背景图像：

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

然后你需要删除开始类并添加停止类，反之亦然：

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

如果您修改CSS停止选择器并将其设置为".start.stop"，您甚至可以删除并添加停止类，而不必担心删除和添加开始类。

相关文章：