javascript - 带淡入淡出的随机图像幻灯片

Question

我想要在自动随机幻灯片放映中旋转图像。我希望每个人都淡入淡出。这是我的 HTML:

<center><div>
  <img class="mySlides" id="div2" src="animals.jpg" style="width:300px;height:300px;">
  <img class="mySlides" id="div2" src="fly.jpg" style="width:300px;height:300px;">
  <img class="mySlides" id="div2" src="three.jpg" style="width:300px;height:300px;">
</div></center>

这是我的脚本:

<script>

var slideIndex = 0;
 carousel();

function carousel() {

        var i;
        var x = document.getElementsByClassName("mySlides");
        var rand = Math.floor(Math.random() * x.length());
        $(x).fadeIn("slow");

        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none"; 
        }

        slideIndex++;
        if (slideIndex > x.length) {slideIndex = 1} 
        x[slideIndex-1].style.display = "block"; 

        setTimeout(function () { // Change image every 4 seconds
        $(x).fadeOut("slow");
        }, 4000);
    }

</script>

只有第一张图片正在加载，我不知道为什么。

Answer 1

您的 carousel() 函数仅提供幻灯片的一次迭代。您可以尝试在超时时简单地添加对 carousel 的调用:

setTimeout(function () { // Change image every 4 seconds
    $(x).fadeOut("slow", function() { 
        carousel(); 
    });
}, 4000);    

请注意，我在“fadeOut”函数的“回调”槽中调用了一个匿名函数；这确保您的下一次“旋转木马()”运行将在旧图像淡出后发生。要让两个淡入淡出同时发生，只需跳过回调:

setTimeout(function () { // Change image every 4 seconds
    $(x).fadeOut("slow");
    carousel(); 
}, 4000);    

随着旧图像淡出，这将开始下一次淡入。