在純 javascript 中切換圖像

Question

我現在有一個播放器圖標，在播放時會更改為暫停圖標。 我正在使用此代碼進行更改：

    <script>
      var onImg= "img/play.svg";
      var offImg= "img/pause.svg";
    </script>

但是，它只能單向運行，再次單擊時不會恢復到播放圖標。 我該如何存檔？ 我只能找到 jQuery 代碼，但我想要一個不依賴於任何庫的解決方案。

演示鏈接： http : //mortenhjort.dk/synchub/v2/ （第一封面有音頻）

Answer 1

看看這個：

 var on = "http://webneel.com/wallpaper/sites/default/files/images/04-2013/15-beach-sea-photography.preview.jpg"; var off = "https://s13.postimg.org/lzdaqr6fr/15_beach_sea_photography_preview_Convert_Image.jpg"; var state = false; var img = document.getElementById("img"); img.onclick = function(){ if(state){ img.src = off; state = false; } else{ img.src = on; state = true; } }

 <img src="http://webneel.com/wallpaper/sites/default/files/images/04-2013/15-beach-sea-photography.preview.jpg" id="img">

當您需要使用暫停圖標更改播放圖標時，解決方案是相同的...希望它有所幫助:)

Answer 2

您可以使用純 javascript 函數更改圖像src屬性，如下所示

img.setAttribute('src',"http://cdn-images.deezer.com/images/cover/fd198aa0a511e33d42c787a364434962/400x400-000000-80-0-0.jpg")