逐步显示4张图片，并在javascript中生效

Question

<!DOCTYPE html>
<html>
<head>
<style>
#steps img{
  -webkit-transition: background-image 1.0s linear 0s;
  transition: background-image 1.0s linear 0s;
  float: left;
  display: none;
  height: 50px;
  width: 50px;
}
</style>
<script>
var i = 0;
var elem;
function nextStep(){
  i++;
  var img = document.createElement("img");
  img.src = "image"+i+".png"
  img.width = "50px";
  img.height = "50px";
  img.id = "step" + i;
  document.getElementById("steps").appendChild(img);
  elem = document.getElementById(img.id);
  elem.style.display = "inline-block";
  elem.style.opacity = "0";
  setTimeout(slide(),5000);
}
function slide(){
  elem.style.opacity = "1";
  if(i > 3){
    clearTimeout(slide());
    clearTimeout(nextStep());
  }
  setTimeout(nextStep(),5000);
}
</script>
</head>
<body>
  <h1>Steps</h1>
  <div id="steps">
    <script>
      nextStep();
    </script>
  </div>
  <p id="text"></p>
</body>
</html>

I have 4 images and i want to create and display them step by step with a css3 effect, it start by executing nextStep() function that creates img child to div and change display and opacity. 我有4张图像，我想用css3效果逐步创建和显示它们，它首先执行nextStep（）函数，该函数创建img子元素以div并更改显示和不透明度。 After that slide() is called, the opacity is set to 1 and we call nextStep() again. 调用slide（）之后，将不透明度设置为1，然后再次调用nextStep（）。 when i > 3 we stop displaying. 当我> 3时，我们停止显示。 When i test it, it displays the 4 images instantly without any effect 当我测试它时，它立即显示4张图像，没有任何影响

EDIT: 编辑：

<!DOCTYPE html>
<html>
<head>
<style>
#steps img{
  /*
  -webkit-transition: background-image 1.0s linear 0s;
  transition: background-image 1.0s linear 0s;
  */
  float: left;
  display: none;
  height: 50px;
  width: 50px;
}
</style>
<script>
var i = 0;
var elem;
//var slide;
//var nextStep;
function nextStep(){
    i++;
  var img = document.createElement("img");
  img.src = "image"+i+".png"
  img.width = "50px";
  img.height = "50px";
  img.id = "step" + i;
  document.getElementById("steps").appendChild(img);
  elem = document.getElementById(img.id);
  elem.style.display = "inline-block";
    //elem.style.opacity = "0";
  setTimeout(slide(),2000);
}
function slide(){
  //elem.style.opacity = "1";
  if(i < 3){
    //clearTimeout(slide());
    //clearTimeout(nextStep());
    setTimeout(nextStep(),2000);
  }

}
</script>
</head>
<body>
  <h1>Steps</h1>
  <div id="steps">
    <script>
    document.onload = function (){
        nextStep();
    };
    </script>
  </div>
  <p id="text"></p>
</body>
</html>

Answer 1

You should always wait for the DOM to be fully loaded before doing any operations on it. 在对其进行任何操作之前，您应始终等待DOM完全加载。 Use document.onload to execute your script when the document is loaded : 加载文档后，使用document.onload执行脚本：

<script>
    document.onload = function (){
        nextSteps()
    };
</script>

Edit : There is more issues with your code. 编辑：您的代码还有更多问题。 The clearTimeout function is not needed here. 这里不需要clearTimeout函数。 Also, you're not using it right. 另外，您使用的也不正确。 Quote from the docs at w3schools : 引用来自w3schools的文档：

The clearTimeout() method clears a timer set with the setTimeout() method. clearTimeout（）方法清除使用setTimeout（）方法设置的计时器。

The ID value returned by setTimeout() is used as the parameter for the clearTimeout() method. setTimeout（）返回的ID值用作clearTimeout（）方法的参数。

Note: To be able to use the clearTimeout() method, you must use a global variable when creating the timeout method: 注意：为了能够使用clearTimeout（）方法，在创建超时方法时必须使用全局变量：

myVar = setTimeout("javascript function",milliseconds); Then, if the function has not already been executed, you will be able to stop the execution by calling the clearTimeout() method. 然后，如果尚未执行该函数，则可以通过调用clearTimeout（）方法来停止执行。

Your slide function should look like this : 您的幻灯片功能应如下所示：

function slide(){
  elem.style.opacity = "1";
  if(i < 3){
      setTimeout(nextStep,5000);
  }
}

Edit 2 : 编辑2：

setTimeout needs a reference to a function, eg the name of the function without the parenthesis : setTimeout需要对函数的引用，例如，不带括号的函数名称：

setTimeout(nextStep,5000);

nextStep is a reference to a function nextStep是对函数的引用
nextStep() is the result returned by the function after its execution (undefined in this case) nextStep()是函数执行后返回的结果（在这种情况下未定义）

逐步显示4张图片，并在javascript中生效

问题描述

1 个解决方案

解决方案1
0 2016-04-18 12:54:10

逐步显示4张图片，并在javascript中生效

问题描述

1 个解决方案

解决方案1 0 2016-04-18 12:54:10

解决方案1
0 2016-04-18 12:54:10