Javascript 如何更改图像src onclick？播放/暫停

我正在尝试创建一个函数，它将在播放和暂停图像之间切换。下面是我的图像标签：

<img id="pause_tail" src="images/Pause.png" />&nbsp;
<img id="resume_tail" src="images/Play.png" />

---

现在，所有的工作都很好，播放和暂停都是相邻的。我想做的是一次只显示一个图像。例如，播放，当单击该按钮时，图像将变为暂停，反之亦然。最好的办法是什么？谢谢

切换某些元素的类并使用这些图像添加样式不是更好吗

像这样你可以做

<img id="pause_tail" src="images/Pause.png" />&nbsp;

$("#pause_tail").click( 
function(){

    var src = this.src;
    if(src.indexOf('Pause') === -1){
        //if there is no Pause in the src attribute currently is playing. 
        //Stop it and change image
        this.src = 'images/Pause.png';
        pauseTail();
     }else{
        //currently Paused, start it
        this.src = 'images/Play.png';
        startTail();
     }

});

$（“#暂停尾随”）。单击（
函数（）{
var src=this.src；
if（src.indexOf（'Pause'）=-1）{
//如果当前正在播放的src属性中没有暂停。
//停下来，换个形象
this.src='images/Pause.png'；
pauseTail（）；
}否则{
//当前已暂停，请启动它
this.src='images/Play.png'；
startTail（）；
}
});

在暂停单击功能调用中

暂停。隐藏（） 及

---

Resume.show（）

这类似于：

$("#pause_tail").click(
function(){
    pauseTail();
    $("#resume_tail").css({ 'display': 'display'});
    $("#pause_tail").css({ 'display': 'none'});
});

$("#resume_tail").click(
function(){
    startTail();
    $("#resume_tail").css({ 'display': 'none'});
    $("#pause_tail").css({ 'display': 'display'});
});

<img id="play_pause" src="images/Play.png" mode="play" />

---

下面的选项也有效。

我只需使用1个img标记，并使用自定义属性“mode”来指定它当前处于的状态，如下所示：

$("#pause_tail").click(
function(){
    pauseTail();
    $("#resume_tail").css({ 'display': 'display'});
    $("#pause_tail").css({ 'display': 'none'});
});

$("#resume_tail").click(
function(){
    startTail();
    $("#resume_tail").css({ 'display': 'none'});
    $("#pause_tail").css({ 'display': 'display'});
});

<img id="play_pause" src="images/Play.png" mode="play" />

---

根据我的经验，最好的方法是切换一个班级。这允许浏览器为两种状态（播放/暂停）预加载图像，以便在第一次加载第二个图像时不会出现闪烁。以下是一个例子：

<style>
    #pause { display: none; } // Set the pause button to be not shown
    .playing #play { display: none; } // Hide the play button when it starts playing
    .playing #pause { display: inline-block; } // Show the pause button when it starts playing
</style>
<script>
    $("#playPause").click(function(){
        // Do stuff when clicked
        $(this).toggleClass("playing"); // Toggle the playing class on/off
    });
</script>
<div id="playPause" class="play>
    <img src="play.png" id="play">
    <img src="pause.png" id="pause">
</div>

#暂停{显示：无；}//将暂停按钮设置为不显示
.playing#play{display:none；}//开始播放时隐藏播放按钮
.playing#pause{display:inline block；}//开始播放时显示暂停按钮
$（“#播放暂停”）。单击（函数（）{
//点击时做一些事情
$（this）.toggleClass（“播放”）；//打开/关闭播放类
});