Question

我有一个使用jQuery fadeIn过渡的4个图像的轮播。旋转木马的第一张图像在之前的动画结束后不会平滑淡入。

以下是该网页的链接： https://rimildeyjsr.github.io/St.Anthony-Website/

如何解决此问题？

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.jpg" alt="school pic" class="img-responsive mySlides">
    <img src="images/Capture.jpg" alt="school pic" class="img-responsive mySlides">
    <img src="images/Capture3.jpg" alt="school pic" class="img-responsive mySlides">
</div>

使用Javascript：

var imgs = $(".slideshow > img");

function carousel() {
    imgs.hide();
    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);
}

链接到github存储库：https://github.com/rimildeyjsr/St.Anthony-Website

Answer 1

默认情况下，所有图像都是可见的并且彼此重叠。当一个幻灯片淡入时，旧幻灯片可见，新幻灯片高于它。所以，你看到了一个平稳的过渡。

当您重新开始转换时，您将隐藏所有图像并淡化第一张图像。那时背面没有旧图像，因此身体的背景（白色）可见，过渡看起来不太好。

解决方案：您需要管理图像的z-index。因此，当最后一张图像结束时，您需要将其保持可见。将第一张图像的z-index更改为大于最后一张图像。然后淡出第一个。（确保你不要隐藏最后一张图片。

falleIn中的错误转换为旋转木马中的第一个图像

1 个答案: