Цикл Javascript, счетчик равен 0 два раза в цикле

Поэтому я работаю над небольшим сценарием слайд-шоу. Проблема в том, что i равно 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:

<ul id="slide-container">
 
 
 
 </ul>

'

Когда вы запустите его, вы увидите, что когда первое изображение исчезло, оно появляется сразу же.

jsFiddle

1 ответ

Посмотрите этот jsfiddle

Он работает, удаляя else if statement, где вы проверяете 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, поставив следующее изображение за активным. Это предотвратит отображение фона, и переход будет приятным.

licensed under cc by-sa 3.0 with attribution.