幻灯片 具有不透明度的阵列图像(淡入淡出）

Slideshow Array image with Opacity (fading in and out)

本文关键字：淡入 淡出 图像 阵列 不透明度 幻灯片      更新时间：2023-09-26

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

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

我当前的代码（JSFiddle）：

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;
function getImg() {
  document.getElementById("output").innerHTML = "<img src= '"" + imgTab[imgNr] + "'" alt = '"img'" />" + "<p>" + imgTxt[imgNr] + "</p>";
  imgNr++;
  if (imgNr == 5) {
    imgNr = 0;
  }
}
<body onload="getImg()">
  <div id="output">
  </div>
  <input type="button" value="next" onclick="getImg()" />
</body>

希望有人能帮助我:)

您应该使用 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 逐步添加/删除不透明度

相关文章：