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（）函数只提供幻灯片的一次迭代。您可以尝试在超时中简单地添加对轮播的调用：

timestamp

注意我在'fadeOut'函数的'callback'槽中调用了一个匿名函数;这可确保您的下一个'carousel（）'运行将在旧图像淡出后发生。要同时发生两个淡入淡出，只需跳过回调：

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

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

随机图像幻灯片与淡入淡出

1 个答案: