在javascript中逐步显示4张图像

Show 4 images step by step with effect in javascript

本文关键字：显示 4张 图像 javascript      更新时间：2023-09-26
<!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>

我有 4 张图像，我想使用 css3 效果逐步创建和显示它们，它首先执行 nextStep(( 函数，该函数创建 img 子级以div 并更改显示和不透明度。调用 slide(( 后，不透明度设置为 1，我们再次调用 nextStep((。当我> 3 时，我们停止显示。当我测试它时，它会立即显示 4 张图像而没有任何影响

编辑：

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

在对 DOM 执行任何操作之前，您应该始终等待 DOM 完全加载。使用 document.onload 在加载文档时执行脚本：

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

编辑：您的代码存在更多问题。此处不需要clearTimeout函数。另外，你没有正确使用它。引用w3schools的文档：

clearTimeout(( 方法清除使用 setTimeout(( 设置的计时器 方法。

由 setTimeout(( 返回的 ID 值用作 clearTimeout(( 方法。

注意：为了能够使用 clearTimeout(( 方法，您必须使用 创建超时方法时的全局变量：

myVar = setTimeout("javascript function",milliseconds); 然后，如果 函数尚未执行，您将能够停止 通过调用 clearTimeout(( 方法执行。

您的滑动函数应如下所示：

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

编辑 2 ：

setTimeout需要对函数的引用，例如不带括号的函数名称：

setTimeout(nextStep,5000);

nextStep是对函数
的引用 nextStep()是函数在执行后返回的结果(在本例中未定义(

相关文章：