如何更改圖片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？播放/暫停

回答

相關問題