在纯javascript中切换图像

Toggle image in pure javascript

本文关键字：图像 javascript 在纯      更新时间：2023-09-26

我现在有一个播放器图标，在播放时更改为暂停图标。我用下面的代码来修改它:

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

然而，它只是单向的，并且当再次点击时不会恢复到播放图标。我该如何存档?我只能找到jQuery代码，但我想有一个不依赖于任何库的解决方案。

链接到演示:http://mortenhjort.dk/synchub/v2/(第一个封面工作与音频)

看看这个:

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

解决方案是相同的，当你需要改变播放图标与暂停图标…希望能有所帮助:)

您可以使用纯javascript函数更改image src属性，如下所示

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