Question

我在我正在建设的网站上遇到了麻烦。我有一个函数，它为不同的ID添加一个特定的类。最终结果是在主页上一次一个地淡出图像。我使用局部变量a，这样我就可以轻松编写不同的id，而无需编写3个独立的函数。但是我在使用setTimeout时遇到问题。我似乎无法让setTimeout工作。任何帮助将不胜感激。这些类被添加到id没有问题，我只是遇到了setTimeout函数的问题。我已经使用了我在这里看过的多种方法，但我并不是很了解它们。任何帮助将不胜感激。这是我的代码：

window.onload;

var fetchOne =document.getElementById('picOne');
console.log(fetchOne);

var fetchTwo =document.getElementById('picTwo');
var fetchThree =document.getElementById('picThree');

function AttachClass (a){
    
    a.className ='opacity';
    
}

setTimeout(AttachClass.bind(null,a),8000);

AttachClass (fetchOne);

AttachClass (fetchTwo);

AttachClass (fetchThree);

#picOne{
    
    opacity: 1;
    
    transition: opacity 2s ease-in-out
    
    
}

#picOne.opacity{
    opacity: 0;
    
    
    
}

#picTwo{
    opacity: 1;
    z-index: -1;
    transition: opacity 2s ease-in-out
    
    
}

#picTwo.opacity{
    opacity: 0;
    
}

#picThree{
   opacity: 1;
    z-index: -2;
    

    transition: opacity 2s ease-in-out
}

#picThree.opacity{
    opacity: 0;
   
    
}

<div class="landscape_pics">
        
        <img id="picOne" src="media/Photographs/BK3U8791.JPG">
        <img id="picTwo" src="media/Photographs/2014Feb%20-%20Vacation%20-%20Sao%20Paulo%20-%200071a.jpg">
        <img id="picThree" src="media/Photographs/2014Aug06%20-%20Stadium%20-%20001.JPG">
        
        
    </div>

Answer 1

您只为1张图片设置1个处理程序，超时和 a永远不会在您的代码中定义粘贴，以便setTimeout无法工作。

为了让它们单独淡出，您需要为每个想要褪色的图像创建一个setTimeout。

for (var i = 0; i < images.length; i++) {
    setTimeout(AttachClass.bind(null, images[i]), 2000);
}

其次，window.onload似乎是某些东西的残余，你可以安全地删除它。

第三，在您设置AttachClass之后，无需调用函数setTimeout，因为它现在由setTimeout处理。< / p>

现在，您只需要将您已经查询过的DOM图像粘贴到一个名为images的数组中，然后离开。

它看起来像这样

var fetchOne = document.getElementById('picOne');
var fetchTwo = document.getElementById('picTwo');
var fetchThree = document.getElementById('picThree');

function AttachClass(a) {
    a.classList.add('opacity'); // IE10+ support only
};

let images = [fetchOne, fetchTwo, fetchThree];

for (var i = 0; i < images.length; i++) {
  setTimeout(AttachClass.bind(null, images[i]), 5000);
}

如果您想进一步完善它，您可以在所有图像上粘贴课程。我选择了类名pic，查询该类名的DOM，然后设置上述超时。

var images = document.getElementsByClassName('pic');

function AttachClass(a) {
  a.classList.add('opacity'); 
}

for (var i = 0; i < images.length; i++) {
  setTimeout(AttachClass.bind(null, images[i]), 1000);
}

JSBIN here让你玩耍！快乐的黑客！

Answer 2

可能你需要这样的东西：

＆＃13;

window.onload = function() {

  AttachClass();

  function AttachClass() {
    setTimeout(function() {
      var a = document.querySelector('.pics img:not(.opacity)');
      if (a) {
        a.className = 'opacity';
        AttachClass();
      }
    }, 1200);
  }
}

＆＃13;

.pics img {
  width: 100px;
  opacity: 1;
  transition: opacity 1s ease-in-out
}

img.opacity {
  opacity: 0;
}

＆＃13;

<div class="pics">
  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg">
  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg">
  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg">
</div>

＆＃13;

Answer 3

感谢大家的帮助。他们帮我找到了最终答案。这就是我最终解决问题的方法。

window.onload
var fetchOne =document.getElementById('picOne');
console.log(fetchOne);
var fetchTwo =document.getElementById('picTwo');
var fetchThree =document.getElementById('picThree');



setInterval(function() {
    
    setTimeout(function AttachClass1 (){ fetchOne.className ='opacity';},1000);
    
    setTimeout(function AttachClass2 (){ fetchTwo.className ='opacity';},8000);
        
    setTimeout(function AttachClass3 (){ fetchThree.className ='opacity';},14000);
    
    setTimeout(function RemoveClass2 () { fetchTwo.classList.remove("opacity");},14000)
    
    setTimeout(function RemoveClass1 () { fetchOne.classList.remove("opacity");},18000)
    
    setTimeout(function RemoveClass3 () { fetchThree.classList.remove("opacity");},18000)
    
},24000);

图像一次一个地翻转，就像我想要的那样。然后他们返回classlist.remove属性。我也可以随心所欲地控制所有的间隔。我对JQuery还不熟悉，所以上面的一些答案让我感到困惑。喜欢坚持主要只是javascript，这是我目前最舒服的。再次感谢您的帮助！

Answer 4

你走了

 var imgs = document.querySelectorAll('.fade');
    var delay = 500;
    for (var i = 0; i < imgs.length; i++) {
        (function(i){
        setTimeout(function () {
            imgs[i].classList.add('opacity');
        }, delay * (i + 1))
        })(i)
    }

.fade {
opacity:.2;
transition: 1s all ease-in-out;
}

.fade.opacity {
opacity:1
}

<div>
    <img src="http://lorempixel.com/200/150/people/" alt="" class="fade" id="i1">
</div>
<div>
    <img src="http://lorempixel.com/200/150/food/" alt="" class="fade" id="i2">
</div>
<div>
    <img src="http://lorempixel.com/200/150/sports/" alt="" class="fade" id="i3">
</div>

利用函数的局部变量和setTimeout

4 个答案: