jQuery .each() метод не перебирает все изображения

Question

Я пытаюсь сделать изображение карусели. Я использую метод jQuery .each() для повторения всех изображений в div с помощью класса = «слайд-шоу».

HTML код

<div class="slideshow"> 
    <img src="images/page-1-hero-image.jpg" alt="school's image" class="img-responsive page-one-pic mySlides"> 
    <img src="images/Capture2.PNG" alt="school pic" class="img-responsive mySlides"> 
    <img src="images/Capture.PNG" alt="school pic" class="img-responsive mySlides"> 
    <img src="images/Capture3.PNG" alt="school pic" class="img-responsive mySlides"> 
</div> 

код CSS

.mySlides { 
    display: none; 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 1; 
    /* to make pic responsive */ 
    min-height: 100%; 
    min-width: 1024px; 
    width: 100%; 
    height: auto; 
} 

Javascript:

function carousel() { 
    $(".slideshow > img").each(function(index, element) { 
     $(element).fadeIn(1000).delay(2000); 
     setTimeout(carousel, 1000); 
    }); 
} 

функция затухает только на первом изображении, а затем останавливается. Другие изображения не отображаются.

здесь ссылка на размещаемом проект: https://rimildeyjsr.github.io/St.Anthony-Website/

Answer 1

Просто улучшение предыдущего ответа, вы можете сделать это в виде обратного вызова (который гарантирует, что функция вызывается только после того, как fadeIn произошло или произошло, так что вам не нужен setTimeout) следующим

function carousel() { 
    var imgs = $(".slideshow > img"); 
    imgs.each(function(index, element) { 
     $(element).delay(index * 2000).fadeIn(1000, function() { 
      if (index + 1 >= imgs.length) { 
       carousel(); // call the function only after all images are fadeIn completed 
      } 
     }); 
    }); 
} 

Смотрите, если это помогает, и если не падение комментарий ниже

Edit:

После .fadeIn() делает его работа, он устанавливает значение displayblock в то, что вам нужно сделать, здесь есть, скрыть элементы, прежде чем продолжить слайд-шоу анимации, для простоты мы будем устанавливать все img элементов отображение на скрытый с помощью .hide(0). Это устанавливает элементы display к none

function carousel() { 
    var imgs = $(".slideshow > img"); 
    imgs.stop().hide(0); // hide all the images whenever the carousel() is called 
    imgs.each(function(index, element) { 
     $(element).delay(index * 2000).fadeIn(1000, function() { 
      if (index + 1 >= imgs.length) { 
       carousel(); // call the function only after all images are fadeIn completed 
      } 
     }); 
    }); 
} 

Позвольте мне знать, если вам нужно что-нибудь еще

Answer 2

Этого код:

function carousel() { 
    $(".slideshow > img").each(function(index,element){ 
     $(element).fadeIn(1000).delay(2000); 
     setTimeout(carousel,1000); 
    }); 
} 

Говорит: «Для каждого IMG элемента, провести второе выцветание, затем оттянуть на две секунды, прежде чем делать ничего, и перенести весь этот процесс (а не на элемент, для всех них), чтобы снова запустить секунду с этого момента ».

Это не имеет большого смысла, вы будете называть carousel несколько раз грубо в то время, когда первое изображение заканчивается замиранием.

Учитывая термин «слайд-шоу», я бы предположил, что вы пытаетесь сделать, это показать каждое изображение в течение двух секунд, прежде чем тратить секунду, когда следующий затухает, зацикливая, когда вы дойдете до конца. Если это так, вы должны позвонить carouselодин раз, через две секунды после того, как последнее изображение закончилось. Вы можете сделать это, отложив затухание и следующий вызов.

function carousel() { 
    var imgs = $(".slideshow > img"); 
    imgs.each(function(index,element){ 
     // Don't make the first one (index = 0) wait at all; 
     // make the second (index = 1) wait 3 seconds, the third 
     // (index = 2) wait 6 seconds, etc. And then fade in 
     $(element).delay(index * 3000).fadeIn(1000); 
    }); 
    // Start the entire process again two seconds after the last image fades in 
    setTimeout(carousel, imgs.length * 3000); 
}