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

Answer 2

最近，这是一个很好的接受答案，但你可以建立在Kundan的方法上并自动迭代图像，而无需先在数组中定义它们。此外，通过简单地更改图像classname，我们可以将所有表示属性（如不透明度和动画）移动到样式表，从而允许您选择显示和动画样式独立于JavaScript。

View the jsFiddle或查看下面的代码段或者查看this jsFiddle with different style and animation（但不能更改JS）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

FYI。你可以这样做entirely in CSS。我不推荐它，但作为一种选择。

Answer 3

您可以在函数中设置一个很小的初始延迟时间（例如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);
}

setTimeOut没有延迟

3 个答案: