Question

我正在编写脚本，按顺序淡出3张图片，但图片的不透明度没有变化。达到if语句但图片不会改变。第一张图片在页面加载时变为1不透明度，所以我不明白为什么它在我的函数中不起作用。

window.onload = function() { 
    document.getElementById("img1").style.opacity = 1;
    setInterval(swapPictures, 2000);
};

var swapPictures = function(){
   if(typeof swapPictures.img1v === 'undefined'){
         swapPictures.img1v = true;
}
if(typeof swapPictures.img2v === 'undefined'){
         swapPictures.img2v = false;
}
if(typeof swapPictures.img3v === 'undefined'){
         swapPictures.img3v = false;
}

if(swapPictures.img1v  && !swapPictures.img2v && !swapPictures.img3v){
         swapPictures.img1v = !swapPictures.img1v;
         swapPictures.img2v = !swapPictures.img2v;
         document.getElementById("img1").style.opacity = .4;
         document.getElementById("imgtwo").style.opactiy = 1;
}else if(!swapPictures.img1v && swapPictures.img2v && !swapPictures.img3v){
         swapPictures.img2v = !swapPictures.img2v;
         swapPictures.img3v = !swapPictures.img3v;
         document.getElementById("imgtwo").style.opacity = .4;
         document.getElementById("imgthree").style.opactiy = 1;
 }else if(!swapPictures.img1v && !swapPictures.img2v && swapPictures.img3v){
         swapPictures.img3v = !swapPictures.img3v;
         swapPictures.img1v = !swapPictures.img1v;
         document.getElementById("imgthree").style.opacity = .4;
         document.getElementById("img1").style.opactiy = 1;
 } 
};

Answer 1

<强> jsBin demo

这就是你所需要的：

var $mpPics = document.getElementsByClassName("mpPics");
var n = $mpPics.length;
var c = 0;

function fadeImg(){
  for(var i=0; i<n; i++) $mpPics[i].style.opacity = 0.4;
  $mpPics[c++%n].style.opacity = 1;
}
fadeImg(); 

setInterval(fadeImg, 2000);

循环元素不透明度

1 个答案: