Question

我制作了一个代码，在幻灯片中显示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>

希望有人能帮助我:)。

Answer 1

您应该使用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()＆amp;内置fadeOut()个方法。

否则，如果您想在纯JS中使用setInterval，可以使用{{1}}添加/删除不透明度

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

1 个答案: