Question

我正在尝试制作图像轮播。我使用jQuery .each（）方法迭代div中的所有图像，使用class =＆＃34; slideshow＆＃34;。

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 一次。您可以通过延迟淡入淡出和下一次调用来实现。

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

Answer 2

只是对上一个答案的改进，你可以以回调的形式进行（这可以确保只有在fadeIn发生或发生后才调用该函数，因此你不需要{{{ 1}}）如下

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 } }); }); }完成工作后，它会将.fadeIn()值设置为display您必须在此处执行的操作，在继续幻灯片动画之前隐藏元素，简单性我们会使用block将所有img元素显示设置为隐藏。这会将元素.hide(0)设置为display

none

如果您还有其他需要，请告诉我

jQuery .each（）方法不会迭代所有图像

2 个答案: