Question

我的HTML文件中有两张图片叠加在一起，并希望在JS文件中每隔3秒切换一次不透明度，以便在它们之间切换。我在没有＆＃34; img.style.opacity＆＃34;的情况下测试了JS文件。它在功能之间循环就好了。看起来像这样..

function Step1(){
    alert("Step 1");    

    setTimeout(Step2(), 3000);
}

function Step2(){
    alert("Step 2");

    setTimeout(Step1(), 3000);
}

它显示了＆＃34;步骤1＆＃34; ＆GT; ＆＃34;步骤2＆＃34; ＆GT; ＆＃34;步骤1＆＃34;每三个一个地方就是这样。

然后我加了一点，现在看起来像这样。

var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');

function Step1(){
    // alert("Step 1"); 
    img1.style.opacity = "0";
    img2.style.opacity = "1";
    setTimeout(Step2(), 3000);
}

function Step2(){
    //alert("Step 2");
    img1.style.opacity = "1";
    img2.style.opacity = "0";
    setTimeout(Step1(), 3000);
}

现在它只会运行Step1（），并且根本不会进入Step2（）。

有点新的JS，很抱歉，如果答案是疯狂的简单。

Answer 1

目前，只要分别调用Step2()和Step1()，就会调用Step1()和Step2()。没有3秒等待。

你应该通过引用将函数传递给setTimeout()（I.E：没有括号）：

var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');

function Step1(){
    // alert("Step 1"); 
    img1.style.opacity = "0";
    img2.style.opacity = "1";
    setTimeout(Step2, 3000);
}

function Step2(){
    //alert("Step 2");
    img1.style.opacity = "1";
    img2.style.opacity = "0";
    setTimeout(Step1, 3000);
}

JSFiddle

Answer 2

简单地可以这样做

setInterval( function() { 
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');

  if ( img1.style.opacity == "0"; ){
     img1.style.opacity = "1";
     img2.style.opacity = "0";
     }
    else if( img2.style.opacity == "0") {
     img1.style.opacity = "0";
     img2.style.opacity = "1";
     }
    else {
    img2.style.opacity = "0";
    img2.style.opacity = "1";
    }

}, 3000 );

确保在文档准备好后加载此间隔。

Answer 3

尝试使用：

<script>
var img1;
var img2;

function Step1(){
     img1 = document.getElementById('img1');// after load of page these id's will be available get them in declared varaibles to use
     img2 = document.getElementById('img2');
    img1.style.opacity = "0";
    img2.style.opacity = "1";
    setTimeout(Step2, 3000);
}

function Step2(){
    //alert("Step 2");
    img1.style.opacity = "1";
    img2.style.opacity = "0";
    setTimeout(Step1, 3000);
}


</script>
<body onload="Step1()"> <!-- call your Step1() function after load of page-->

<img src="http://placehold.it/200x200" id="img1">
<img src="http://placehold.it/200x200" id="img2">
</body>

当我添加img.style.opacity时，setTimeout（）无法正常工作

3 个答案: