javascript - 循环元素不透明度

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);