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

在纯JavaScript中切换图像

2 个答案: