Javascript 设置无延迟超时

目标是使图片相互转换

我从第一张图片的不透明度为1开始，另外三张图片的不透明度为0

我如何让它从一开始就开始转换，然后每12秒继续一次转换循环。我不想等待12秒才开始转换

这是我的HTML和内联CSS

    <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>

$（文档）.ready（函数（）{
setInterval（函数（）{
setTimeout（函数（）{
document.getElementById（“01BrunetteGirl”）.style.opacity=“0”；
document.getElementById（“02ManAndWife”）.style.opacity=“1”；
document.getElementById（“03GlassesMan”）.style.opacity=“0”；
document.getElementById（“04BlondGirl”）.style.opacity=“0”；
}, 3000);
setTimeout（函数（）{
document.getElementById（“01BrunetteGirl”）.style.opacity=“0”；
document.getElementById（“02ManAndWife”）.style.opacity=“0”；
document.getElementById（“03GlassesMan”）.style.opacity=“1”；
document.getElementById（“04BlondGirl”）.style.opacity=“0”；
}, 6000);
setTimeout（函数（）{
document.getElementById（“01BrunetteGirl”）.style.opacity=“0”；
document.getElementById（“02ManAndWife”）.style.opacity=“0”；
document.getElementById（“03GlassesMan”）.style.opacity=“0”；
document.getElementById（“04BlondGirl”）.style.opacity=“1”；
}, 9000);
setTimeout（函数（）{
document.getElementById（“01BrunetteGirl”）.style.opacity=“1”；
document.getElementById（“02ManAndWife”）.style.opacity=“0”；
document.getElementById（“03GlassesMan”）.style.opacity=“0”；
document.getElementById（“04BlondGirl”）.style.opacity=“0”；
}, 12000);
}, 12000);
});

如下更改代码

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

---

如下更改代码

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

---

很晚了，有一个很好的公认答案，但您可以基于Kundan的方法自动迭代图像，而无需首先在数组中定义它们。此外，通过简单地更改图像的

类名

，我们可以将所有表示属性（如不透明度和动画）移动到样式表中，从而允许您独立于JavaScript拾取和选择显示和动画样式

或者查看下面的代码片段。
或签出（但不更改JS）

var images=document.querySelectorAll（“#images img”），
i=图像长度-1；
（函数next（）{
i++；
图像[i-1]。类名=”；
如果（i>=images.length）{i=0；}
图像[i].className=“活动”；
setTimeout（函数（）{next（）；}，3000）；
})();
#图像img{
位置：绝对位置；
宽度：100%；
不透明度：0；
过渡：全部为1.0；
-moz转换：全部为1.0；
-webkit转换：所有1.0；
-webkit变换：旋转（180度）比例（0.2）；
变换：旋转（180度）比例（0.2）；
}
#图像img.active{
不透明度：1；
-webkit变换：旋转（0度）比例（1）；
变换：旋转（0度）比例（1）；
}
很晚了，有一个很好的公认答案，但您可以基于Kundan的方法自动迭代图像，而无需首先在数组中定义它们。此外，通过简单地更改图像的
类名
，我们可以将所有表示属性（如不透明度和动画）移动到样式表中，从而允许您独立于JavaScript拾取和选择显示和动画样式

或者查看下面的代码片段。

或签出（但不更改JS）


var images=document.querySelectorAll（“#images img”），
i=图像长度-1；
（函数next（）{
i++；
图像[i-1]。类名=”；
如果（i>=images.length）{i=0；}
图像[i].className=“活动”；
setTimeout（函数（）{next（）；}，3000）；
})();
#图像img{
位置：绝对位置；
宽度：100%；
不透明度：0；
过渡：全部为1.0；
-moz转换：全部为1.0；
-webkit转换：所有1.0；
-webkit变换：旋转（180度）比例（0.2）；
变换：旋转（180度）比例（0.2）；
}
#图像img.active{
不透明度：1；
-webkit变换：旋转（0度）比例（1）；
变换：旋转（0度）比例（1）；
}
您可以设置一个非常小的初始延迟时间（例如100），并将其设置为功能中所需的延迟时间：


var延迟=100；
函数foo（）{
document.getElementById（“01BrunetteGirl”）.style.opacity=“1”；
document.getElementById（“02ManAndWife”）.style.opacity=“0”；
document.getElementById（“03GlassesMan”）.style.opacity=“0”；
document.getElementById（“04BlondGirl”）.style.opacity=“0”；
延迟=12000；
设置超时（foo，延迟）；
}
您可以设置一个非常小的初始延迟时间（例如100），并将其设置为功能中所需的延迟时间：


var延迟=100；
函数foo（）{
document.getElementById（“01BrunetteGirl”）.style.opacity=“1”；
document.getElementById（“02ManAndWife”）.style.opacity=“0”；
document.getElementById（“03GlassesMan”）.style.opacity=“0”；
document.getElementById（“04BlondGirl”）.style.opacity=“0”；
延迟=12000；
设置超时（foo，延迟）；
}
您的代码按原样工作：（我更改了图像引用和样式）@joemfb您是对的，它可以工作。真奇怪。它开始工作了。但另一个问题是，由于SetInterval，启动需要12秒。我该怎么做