javascript - 立即设置TimeOut

Question

目标是让图片相互过渡。

我从第一张不透明度为 1 的图片开始，其他三张图片的不透明度为 0。

我怎样才能让它从头开始过渡，然后每 12 秒继续过渡循环。我不想等待 12 秒才能开始转换

这是我的带有内联 CSS 的 HTML

    <img id="01BrunetteGirl" style="width:100%; opacity:1;" src="images/brunettesmiling.jpg" alt="">
    <img id="02ManAndWife" style="width:100%; opacity:0;" src="images/manandwife.jpg" alt="" />
    <img id="03GlassesMan" style="width:100%; opacity:0;" src="images/manwithglasses.jpg" alt="">
    <img id="04BlondeGirl" style="width:100%; opacity:0;" src="images/blondegirlsmile.jpg" alt="" />

这是我的 Javascript

    <script>
        $(document).ready(function() {
            setInterval(function() {
                setTimeout(function() {
                    document.getElementById("01BrunetteGirl").style.opacity = "0";
                    document.getElementById("02ManAndWife").style.opacity = "1";
                    document.getElementById("03GlassesMan").style.opacity = "0";
                    document.getElementById("04BlondeGirl").style.opacity = "0";
                }, 3000);
                setTimeout(function() {
                    document.getElementById("01BrunetteGirl").style.opacity = "0";
                    document.getElementById("02ManAndWife").style.opacity = "0";
                    document.getElementById("03GlassesMan").style.opacity = "1";
                    document.getElementById("04BlondeGirl").style.opacity = "0";
                }, 6000);
                setTimeout(function() {
                    document.getElementById("01BrunetteGirl").style.opacity = "0";
                    document.getElementById("02ManAndWife").style.opacity = "0";
                    document.getElementById("03GlassesMan").style.opacity = "0";
                    document.getElementById("04BlondeGirl").style.opacity = "1";
                }, 9000);
                setTimeout(function() {
                    document.getElementById("01BrunetteGirl").style.opacity = "1";
                    document.getElementById("02ManAndWife").style.opacity = "0";
                    document.getElementById("03GlassesMan").style.opacity = "0";
                    document.getElementById("04BlondeGirl").style.opacity = "0";
                }, 12000);
            }, 12000);
        });
    </script>

Answer 1

像下面这样更改你的代码

 var currentImageIndex = 0;
 setInterval(function() {
    var imageArrayIds = ["01BrunetteGirl", "02ManAndWife", "03GlassesMan", "04BlondeGirl"];
    if(currentImageIndex > 3) {
        currentImageIndex = 0;
    }

    for(var index in imageArrayIds) {
        document.getElementById(imageArrayIds[index]).style.opacity = (currentImageIndex == index ? "1" : "0");
    }

    currentImageIndex++;
 }, 3000);

Working Demo

Working Demo with jQuery animate effect