Javascript 幻灯片显示不透明度阵列图像（淡入淡出）

我制作了一个代码，在幻灯片中显示5幅图像（按下下一步按钮时）。 我希望在更改图片时，不透明度从1.0变为0.1，再变为1.0

没有jQuery，只有简单的JavaScript，我怎么能做到这一点呢

我当前的代码（）：

var imgTab=[“img1.jpg”、“img2.jpg”、“img3.jpg”、“img4.jpg”、“5.jpg”]；
var imgTxt=[“img 1”、“img 2”、“img 3”、“img 4”、“img 5”]；
var-imgNr=0；
函数getImg（）{
document.getElementById（“输出”）.innerHTML=“”+”“+imgTxt[imgNr]+”
”；
imgNr++；
如果（imgNr==5）{
imgNr=0；
}
}

---

您应该使用

style.opacity

访问CSS属性，并相应地将其更改为1或0

setTimeout

可以在一段时间后反转不透明度

 var thisImg= document.getElementById('yourImg');

 thisImg.style.opacity = 0.1;

 setTimeout(function(){
     thisImg.style.opacity = 1
 },1000);

---

我觉得您正在寻找渐弱的透明度，这可以通过jQuery轻松实现，因为它内置了

fadeIn（）

&

fadeOut（）

方法

否则，如果您希望在纯JS中添加/删除不透明度，可以使用

setInterval

逐步添加/删除不透明度