立即设置超时

setTimeOut without delay

本文关键字：超时 设置      更新时间：2023-09-26

目标是让图片相互转换。

我开始时，第一张照片的不透明度为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>

像下面的一样更改代码

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

工作演示

使用jQuery动画效果的工作演示

晚了，有一个很好的公认答案，但您可以在Kundan的方法的基础上自动迭代图像，而无需首先在数组中定义它们。此外，只需更改图像的classname，我们就可以将所有表示属性（如不透明度和动画）移动到样式表中，从而允许您独立于JavaScript选择显示和动画样式。

查看jsFiddle或查看下面的片段
或者看看这个具有不同风格和动画的jsFiddle（但没有更改为JS）

var images = document.querySelectorAll("#images img"),
    i=images.length-1;
(function next(){   
    i++;    
    images[i-1].className="";
    if(i>=images.length){i=0;}
    images[i].className="active";
    setTimeout(function(){next();},3000);
})();
#images img{
    position:absolute;
    width:100%;
    opacity:0;
    transition: all 1.0s;
    -moz-transition: all 1.0s;
    -webkit-transition: all 1.0s;
    -webkit-transform:rotate(180deg) scale(0.2);
    transform:rotate(180deg) scale(0.2);
}
#images img.active {
    opacity:1;
    -webkit-transform:rotate(0deg) scale(1);
    transform:rotate(0deg) scale(1);
}
<div id="images">
    <img src="http://www.placehold.it/200&text=brunettesmiling.jpg" alt="brunette smiling" />
    <img src="http://www.placehold.it/200&text=manandwife.jpg" alt="man and wife" />
    <img src="http://www.placehold.it/200&text=manwithglasses.jpg" alt="man with glasses" />
    <img src="http://www.placehold.it/200&text=blondegirlsmile.jpg" alt="blonde girl smile" />
</div>

FYI。你可以完全在CSS中完成这项工作。我不推荐它，但它是一种选择。

您可以设置一个非常小的初始延迟时间（例如100），并在函数中将其设置为您想要的延迟时间：

var delay = 100;
function foo() {
  document.getElementById("01BrunetteGirl").style.opacity = "1";
  document.getElementById("02ManAndWife").style.opacity = "0";
  document.getElementById("03GlassesMan").style.opacity = "0";
  document.getElementById("04BlondeGirl").style.opacity = "0";
  delay = 12000;
  setTimeout(foo, delay);
}

相关文章：