在Vanilla JS中使用FadeIN / Out从数组中显示随机图像以获得多个图像？

Question

我不能用于多张图片！任何想法，请。

这是我的html代码：

<img src="bomb.gif" id="showRandom" class="random" alt=""> 
<img src="smile.gif" id="showRandom" class="random" alt=""> 
<img src="frown.gif" id="showRandom" class="random" alt=""> 

JS：

var img_array = ["bomb.gif", "frown.gif", "grim.gif", "smile.gif"];

setInterval(function randomImages () {
  var randomImage = img_array[Math.floor(Math.random()*img_array.length)];

 document.querySelector("#showRandom").src = randomImage;
}, 1500);

---

Answer 1

var img_array = ["bomb.gif", "frown.gif", "grim.gif", "smile.gif"];

		setInterval(function randomImages () {
		  var randomImage = img_array[Math.floor(Math.random()*img_array.length)];
		  var imgNode = document.querySelector("#showRandom");	
		  
		 imgNode.classList.remove('random');
		 imgNode.classList.add('transitioning-src');
		 
		 setTimeout(() => {
				imgNode.src = randomImage;
                imgNode.classList.remove('transitioning-src');
				imgNode.classList.add('random');
            }, 400);
		 document.querySelector(".imgsrc").value = randomImage;
		}, 3000); 

.transitioning-src {
				transition: opacity .4s ease-out;
				-webkit-transition: opacity .4s ease-out;
				-moz-transition: opacity .4s ease-out;
				-ms-transition: opacity .4s ease-out;
				-o-transition: opacity .4s ease-out;
				opacity: 0;
			}
			#showRandom {
				height: 200px;
				width: 300px;
        border: 1px solid black;
			}
			.random{
				transition: opacity .4s ease-in;
				-webkit-transition: opacity .4s ease-in;
				-moz-transition: opacity .4s ease-in;
				-ms-transition: opacity .4s ease-in;
				-o-transition: opacity .4s ease-in;
				opacity: 1;
			}

<input type="text" class="imgsrc"/><br />
	<img src="avatar.png" id="showRandom" class="random" alt="" />