在javascript中逐步显示4个图像 #步骤img{ -webkit转换：背景图像1.0s线性0s；过渡：背景图像1.0s线性0s；浮动：左；显示：无；高度：50px；宽度：50px； } var i=0； var-elem；函数nextStep（）{ i++； var img=document.createElement（“img”）； img.src=“image”+i+.png” img.width=“50px”； img.height=“50px”； img.id=“步骤”+i； document.getElementById（“步骤”）.appendChild（img）； elem=document.getElementById（img.id）； elem.style.display=“内联块”； elem.style.opacity=“0”；设置超时（幻灯片（），5000）； } 函数幻灯片（）{ elem.style.opacity=“1”；如果（i>3）{ clearTimeout（幻灯片（））； clearTimeout（nextStep（））； } setTimeout（nextStep（），5000）； } 台阶下一步（）； _Javascript_Html_Image_Css

在javascript中逐步显示4个图像 #步骤img{ -webkit转换：背景图像1.0s线性0s；过渡：背景图像1.0s线性0s；浮动：左；显示：无；高度：50px；宽度：50px； } var i=0； var-elem；函数nextStep（）{ i++； var img=document.createElement（“img”）； img.src=“image”+i+.png” img.width=“50px”； img.height=“50px”； img.id=“步骤”+i； document.getElementById（“步骤”）.appendChild（img）； elem=document.getElementById（img.id）； elem.style.display=“内联块”； elem.style.opacity=“0”；设置超时（幻灯片（），5000）； } 函数幻灯片（）{ elem.style.opacity=“1”；如果（i>3）{ clearTimeout（幻灯片（））； clearTimeout（nextStep（））； } setTimeout（nextStep（），5000）； } 台阶下一步（）；

javascript html image css

在javascript中逐步显示4个图像 #步骤img{ -webkit转换：背景图像1.0s线性0s；过渡：背景图像1.0s线性0s；浮动：左；显示：无；高度：50px；宽度：50px； } var i=0； var-elem；函数nextStep（）{ i++； var img=document.createElement（“img”）； img.src=“image”+i+.png” img.width=“50px”； img.height=“50px”； img.id=“步骤”+i； document.getElementById（“步骤”）.appendChild（img）； elem=document.getElementById（img.id）； elem.style.display=“内联块”； elem.style.opacity=“0”；设置超时（幻灯片（），5000）； } 函数幻灯片（）{ elem.style.opacity=“1”；如果（i>3）{ clearTimeout（幻灯片（））； clearTimeout（nextStep（））； } setTimeout（nextStep（），5000）； } 台阶下一步（）； ,javascript,html,image,css,Javascript,Html,Image,Css,我有4个图像，我想用css3效果一步一步地创建和显示它们，首先执行nextStep（）函数，创建img child以div并更改显示和不透明度。调用该幻灯片（）后，不透明度设置为1，我们再次调用nextStep（）。当i>3时，我们停止显示。当我测试它时，它立即显示4个图像，没有任何效果编辑： #步骤img{ /* -webkit转换：背景图像1.0s线性0s；过渡：背景图像1.0s线性0s； */ 浮动：左；显示：无；高度：50px；宽度：50px； } var i=0； var-

我有4个图像，我想用css3效果一步一步地创建和显示它们，首先执行nextStep（）函数，创建img child以div并更改显示和不透明度。调用该幻灯片（）后，不透明度设置为1，我们再次调用nextStep（）。当i>3时，我们停止显示。当我测试它时，它立即显示4个图像，没有任何效果

编辑：


#步骤img{
/*
-webkit转换：背景图像1.0s线性0s；
过渡：背景图像1.0s线性0s；
*/
浮动：左；
显示：无；
高度：50px；
宽度：50px；
}
var i=0；
var-elem；
//var幻灯片；
//var-nextStep；
函数nextStep（）{
i++；
var img=document.createElement（“img”）；
img.src=“image”+i+.png”
img.width=“50px”；
img.height=“50px”；
img.id=“步骤”+i；
document.getElementById（“步骤”）.appendChild（img）；
elem=document.getElementById（img.id）；
elem.style.display=“内联块”；
//elem.style.opacity=“0”；
设置超时（幻灯片（），2000）；
}
函数幻灯片（）{
//elem.style.opacity=“1”；
如果（i<3）{
//clearTimeout（幻灯片（））；
//clearTimeout（nextStep（））；
setTimeout（nextStep（），2000）；
}
}
台阶
document.onload=函数（）{
下一步（）；
};

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

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

编辑2:

setTimeout

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

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

nextStep
是对函数的引用

nextStep（）？在头部？使用它而不是nextStep（）@Spanpa我已经更新了我的答案，以解决代码中的其他问题。我用你的答案更正了我的代码，但图像现在没有出现，好像没有调用函数nextStep（） <script> document.onload = function (){ nextSteps() }; </script> function slide(){ elem.style.opacity = "1"; if(i < 3){ setTimeout(nextStep,5000); } } setTimeout(nextStep,5000);