javascript - jQuery .each() 方法不会遍历所有图像

Question

我正在尝试制作图片轮播。我正在使用 jQuery .each() 方法通过 class="slideshow"遍历 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

这段代码:

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

说:“对于每个 img 元素，花一秒钟淡入，然后在什么都不做之前延迟两秒钟，并重新安排整个过程(不是每个元素，而是所有元素)从现在开始再次运行。”

这没有多大意义，大致在第一张图片淡出时，您将再次多次调用 carousel。

鉴于术语“幻灯片放映”，我猜您想要做的是将每张图片放映两秒钟，然后花一秒钟时间让下一张图片淡入，当您结束时循环播放。如果是这样，您想要调用 carousel 一次，在最后一张图像完成淡入后两秒。您可以通过延迟淡入淡出和下一次调用来实现。 p>

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