Javascript循環，計數器等於0兩次循環

所以我正在製作一個小幻燈片腳本。問題是i等於0兩次循環。在下面的代碼的代碼：Javascript循環，計數器等於0兩次循環

for (var i = 0; children.length > i; i++) { 

     (function(children, i, time){ 
      setTimeout (function(){ 
       // fade out current slide 
       setTimeout(function(){ 
         fadeItOut(children[i]); 
        },2000); 

       // wait for the execution of the if statement 
       var nextSlide = window.setInterval(function(){ 
        // if the current slide is not the first slide 
        // and if the slide before current slide has faded out 
        if(children[i-1] && children[i-1].style.opacity === "") { 
         // show the next slide 
         children[i].style.display = 'block'; 
         nextSlide = window.clearInterval(nextSlide); 
        } 

        // if the current slide is the first slide 
        else if (i === 0) { 
         // just show it 
         children[i].style.display = 'block'; 
        } 
       },1); 

      }, time); 

     })(children, i, time) 

     time += 2000; 
    }

這是整個腳本：

var magic = window.setInterval(function(){ 
if (document.readyState === "complete") { 

    // globals 
    var children = document.getElementById('slide-container').children, 
     time = 2000; 

    // fadeout function 
    function fadeItOut (element) { 
     var child = element; 
     // get the current opacity 
     function opacityNo (element) { 
      if (element.style.opacity === "") { 
       return 1; 
      } else { 
       return element.style.opacity; 
      } 
     }; 

     child.style.opacity = opacityNo(child); 
     //decrase opacity to 0 by 1 
     var decrase = window.setInterval(function(){ 
      child.style.opacity -= 1/100; 
      if (child.style.opacity <= 0.01) { 
       child.style.opacity = "";  
       child.style.display = 'none';  
       decrase = window.clearInterval(decrase); 
      } 
     },1); 
    }; 


    // start the show 
    for (var i = 0; children.length > i; i++) { 

     (function(children, i, time){ 
      setTimeout (function(){ 
       // fade out current slide 
       setTimeout(function(){ 
         fadeItOut(children[i]); 
        },2000); 

       // wait for the execution of the if statement 
       var nextSlide = window.setInterval(function(){ 
        // if the current slide is not the first slide first 
        // and if the slide before current slide has faded out 
        if(children[i-1] && children[i-1].style.opacity === "") { 
         // show the next slide 
         children[i].style.display = 'block'; 
         nextSlide = window.clearInterval(nextSlide); 
        } 

        // if the current slide is the first slide 
        else if (i === 0) { 
         // just show it 
         children[i].style.display = 'block'; 
        } 
       },1); 

      }, time); 

     })(children, i, time) 

     time += 2000; 
    } 


    // end the show 
    console.log(time); 
    magic = window.clearInterval(magic); 

} else { 
    console.log("..."); 
} 
}, 1000);

的一點是，它等待，直到前一張幻燈片顯示下一張幻燈片之前完全淡出。

我使用它連同這個HTML：`

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title></title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <script type="text/javascript" src="slideshow.js"></script> 
</head> 
<body> 
    <ul id="slide-container"> 
     <li style="display: none;"><img src="http://i.imgur.com/8qBcyzc.jpg"></li> 
     <li style="display: none;"><img src="http://i.imgur.com/oxMTFTF.png"></li> 
     <li style="display: none;"><img src="http://i.imgur.com/JTM6Yqg.jpg"></li> 
    </ul> 

</body>

當你運行它，你會看到，當第一個圖像已經淡出，它再次立即出現。

jsFiddle

來源

2013-07-21 Johnny

您執行了哪些調試？ –

你可以把它放在JSfiddle中嗎？正如Lightness所建議的那樣，我認爲每一行都需要調試才能看到發生了什麼。我懷疑問題出在setTimeout（） – User970008

@ User970008 JF：http://jsfiddle.net/xHn4x/ – Johnny

請參閱this jsfiddle

它是通過去除else if聲明，你驗證，如果i === 0工作。該驗證必須在前面的if聲明中完成。

if((children[i-1] && children[i-1].style.opacity === "") || i === 0) { 
    // show the next slide 
    children[i].style.display = 'block'; 
    window.clearInterval(nextSlide); 
}

我建議你通過將下一個圖像背後的活躍一個玩弄z-index。這將阻止顯示背景並且過渡很好。

來源

2013-07-21 16:16:39

它的效果很好。但是，從你在那裏給你的那個版本的版本來看，不是礦版嗎？它不應該工作嗎？ – Johnny

你的版本之間的區別在於你不清除'else if'語句中的時間間隔。 'window.clearInterval（nextSlide）;' –

你完全正確。感謝您指出和小費。 – Johnny

Javascript循環，計數器等於0兩次循環

回答

相關問題