使用计数器的幻灯片Javascript淡入功能[重复]

Question

此问题已经在这里有了答案：

Add transition while changing img src with javascript（3个答案）

关闭12分钟前。

我正在用js制作一个简单的幻灯片，并希望创建一个淡入淡出功能，该功能可以通过我现在正在使用的这段代码轻松实现。

var pics = [pics]
var btn = document.querySelector("button");
var img = document.querySelector("img");
var counter = 1;
btn.addEventListener("click", function(){
if(counter === 5)
{
counter = 0;
}
img.src = pics[counter]
counter = counter + 1; });

Answer 1

这样的东西

var pics = ["https://picsum.photos/id/1/200/300", "https://picsum.photos/id/2/200/300", "https://picsum.photos/id/3/200/300", "https://picsum.photos/id/4/200/300", "https://picsum.photos/id/5/200/300"];
var btn = document.querySelector("button");
var img = document.querySelector("img");
var counter = 1;
btn.addEventListener("click", function() {
  if (counter >= pics.length) {
    counter = 0;
  }
  img.classList.add('transitioning-src')
  img.src = pics[counter]
  setTimeout(() => {
    img.classList.remove('transitioning-src');
  }, 400); // Ensure timeout matches transition time, remove transition class  
  counter++;
});

img {
  transition: opacity 0.4s ease-in;
  opacity: 1;
}

.transitioning-src {
  transition: opacity 0.4s ease-out;
  opacity: 0;
}

<img src="https://picsum.photos/id/1/200/300" />
<button type="button">Next</button>