如何更改图片src onclick？播放/暂停

我正在尝试创建一个可以在播放和暂停图像之间切换的功能。下面是我的形象标签：如何更改图片src onclick？播放/暂停

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

现在，一切工作正常，并播放和暂停是彼此相邻。我想要做的只是一次显示一张图片。例如，玩，当点击时，图像变为暂停，反之亦然。这是什么最好的方式呢？谢谢！

来源

2012-01-17 ad2387

你可以做

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

});

来源

2012-01-17 16:59:26

这工作得很好......感谢您的帮助！ – ad2387

你应该接受他的答案，使用大1下的复选标记。 – MattW

@adaher23如果它适用，你应该接受答案 –

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

水木清华这样http://jsfiddle.net/fEYC3/

来源

2012-01-17 16:59:11 giker

在暂停点击函数调用

Pause.hide（）和 Resume.show（）

来源

2012-01-17 16:59:50 eiu165

这是这样的：

$("#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'}); 
});

选项波纹管是有效的太..

来源

2012-01-17 17:02:24 jzafrilla

我只想用1个img标签和使用自定义属性“模式”，将其指定为当前处于哪种状态，像这样：

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

来源

2012-01-17 17:03:25 MattW

以我的经验来做到这一点是通过切换一类的最佳途径。这允许浏览器为两种状态（播放/暂停）预先加载图像，以便在第一次加载第二个图像时不会出现闪烁。这里是一个例子：

<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>

来源

2012-01-17 17:46:38 pseudosavant

如何更改图片src onclick？播放/暂停

回答

相关问题