使用计数器的幻灯片Javascript淡入淡出功能

我正在用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; });

像这样的

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（“按钮”）；
var img=document.querySelector（“img”）；
var计数器=1；
btn.addEventListener（“单击”，函数（）{
如果（计数器>=图片长度）{
计数器=0；
}
img.classList.add（'transitioning-src'）
img.src=pics[计数器]
设置超时（（）=>{
img.classList.remove（'transitioning-src'）；
}，400）；//确保超时与转换时间匹配，删除转换类
计数器++；
});
img{
过渡：不透明度0.4s；
不透明度：1；
}
.src的过渡{
过渡：不透明度0.4s减缓；
不透明度：0；
}

接下来
这看起来不像Java。。。