如何更改图像src onclick?播放/暂停

How do I change image src onclick? Play/Pause

本文关键字：播放 暂停 onclick 何更改 图像 src      更新时间：2023-09-26

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

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

这些由jQuery处理，以相应地调用启动/暂停尾部函数：

$("#pause_tail").click(
function(){
    pauseTail();
});
$("#resume_tail").click(
function(){
    startTail();
});

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

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

Smth是这样的http://jsfiddle.net/fEYC3/

您可以进行

<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();
     }
});

在暂停点击函数中调用

Pause.hide（）和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'});
});

以下选项也有效。。

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

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

然后在jQuery中，根据模式，交换图像：

$("#play_pause").click(function(){
    var imgSrc = this.src;
    if(imgSrc.attr("mode") === "play"){
        this.src = 'images/Pause.png';
        pauseTail();
    }
    else{
        this.src = 'images/Play.png';
        startTail();
    }
});

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

<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>
相关文章：