最后一张图像显示在JavaScript中的完整图像列表中

我正在尝试下面的代码，以获得自动幻灯片的图像是4至5图像应该出现一个接一个连续。为此，我在下面编写了代码，使用For循环和

setTimeout

将图像延迟到列表末尾

我在这里面临的问题是，经过一段时间的延迟后，我能够查看图像，但我只能看到列表中的最后一张图像，而不是所有图像

无法找出问题所在

<article id="images" >

</article>
<script>
    var ima = ['11.jpg','12.jpg' ];
    var txt="'"+"Images/"+ima[0]+"'"; */
    var x = document.createElement("IMG");
    for (i = 0; i < ima.length; i++) {
        var x = document.createElement("IMG");
        x.setAttribute("src", "Images/"+ima[i]);
        x.setAttribute("width", "200");
        x.setAttribute("height", "200");
        setTimeout(function(){document.getElementById("images").appendChild(x);}, 1000);
    }
</script>

var ima=['11.jpg'，'12.jpg']；
var txt=“”“+”图像/“+ima[0]+”*/
var x=document.createElement（“IMG”）；
对于（i=0；i

仅使用上述代码

12.jpg

显示在窗口中，但不显示

11.jpg

我的期望是：

• 首先，应该显示

  11.jpg

• 然后1秒后，

  11.jpg

  应该不可见，

  12.jpg

  应该可见

这是一个异步问题

setTimeout

在循环运行完毕后触发它回调。存储在

x

中的值对于使用您提供的代码的循环的每次迭代都不会不同

当setTimeout最终调用此行时：

document.getElementById("images").appendChild(x);

x的值将是在 循环的最后一次迭代。所以如果你有5个元素，你将 调用setTimeout 5次，其中

x.src==“Images”+ima[4]

---

要解决这个问题，可以使用闭包在调用x变量时保持其作用域不变：

for (i = 0; i < ima.length; i++) {

  var x = document.createElement("IMG");
  x.setAttribute("src", "Images/"+ima[i]);
  x.setAttribute("width", "200");
  x.setAttribute("height", "200");

  // create a closure to pass to set interval
  appendImg = function(x){
    return function(){
      document.getElementById("images").appendChild(x);
    };
  }(x);

  // pass closure to setInterval, the x value will be enclosed in the closure for each
  //value of x
  setTimeout(appendImg, 1000);
}

for（i=0；i

这是一个异步问题<代码>设置超时在循环完成运行后触发回调。存储在

x

中的值对于使用您提供的代码的循环的每次迭代都不会不同

当setTimeout最终调用此行时：

document.getElementById("images").appendChild(x);

x的值将是在 循环的最后一次迭代。所以如果你有5个元素，你将 调用setTimeout 5次，其中

x.src==“Images”+ima[4]

---

要解决这个问题，可以使用闭包在调用x变量时保持其作用域不变：

for (i = 0; i < ima.length; i++) {

  var x = document.createElement("IMG");
  x.setAttribute("src", "Images/"+ima[i]);
  x.setAttribute("width", "200");
  x.setAttribute("height", "200");

  // create a closure to pass to set interval
  appendImg = function(x){
    return function(){
      document.getElementById("images").appendChild(x);
    };
  }(x);

  // pass closure to setInterval, the x value will be enclosed in the closure for each
  //value of x
  setTimeout(appendImg, 1000);
}

for（i=0；i

问题是您在循环中调用超时两次。试试这个

var ima = ['11.jpg','12.jpg' ];
var counter = 0;

function slide() {
  if(x > ima.length ) counter = 0;
  var txt="'"+"Images/"+ima[0]+"'"; 
  var x = document.createElement("IMG");
  for (i = 0; i < ima.length; i++) {

    var x = document.createElement("IMG");
    x.setAttribute("src", "Images/"+ima[i]);
    x.setAttribute("width", "200");
    x.setAttribute("height", "200");
  }
  document.getElementById("images").appendChild(x);

  counter++;
  setTimeout(function(){slide()}, 1000);
}

slide();

varima=['11.jpg'，'12.jpg']；
var计数器=0；
函数幻灯片（）{
如果（x>ima.length）计数器=0；
var txt=“”“+”图像/“+ima[0]+”；
var x=document.createElement（“IMG”）；
对于（i=0；i

问题是您在循环中调用超时两次。试试这个

var ima = ['11.jpg','12.jpg' ];
var counter = 0;

function slide() {
  if(x > ima.length ) counter = 0;
  var txt="'"+"Images/"+ima[0]+"'"; 
  var x = document.createElement("IMG");
  for (i = 0; i < ima.length; i++) {

    var x = document.createElement("IMG");
    x.setAttribute("src", "Images/"+ima[i]);
    x.setAttribute("width", "200");
    x.setAttribute("height", "200");
  }
  document.getElementById("images").appendChild(x);

  counter++;
  setTimeout(function(){slide()}, 1000);
}

slide();

varima=['11.jpg'，'12.jpg']；
var计数器=0；
函数幻灯片（）{
如果（x>ima.length）计数器=0；
var txt=“”“+”图像/“+ima[0]+”；
var x=document.createElement（“IMG”）；
对于（i=0；i

对于您描述的设置，我觉得您最好使用

• 呈现式CSS
  而不是

• 行为javascript

以下是一个例子：

。相框{
位置：相对位置；
宽度：160px；
高度：160px；
背景色：rgb（15,15,127）；
溢出x：隐藏；
}
.相框{
位置：绝对位置；
排名：0；
右：-160px；
z指数：6；
宽度：160px；
高度：160px；
}
.相框img:N类型（1）{
动画：幻灯片-左-1 12s线性无限；
}
.画框图像：第n种类型（2）{
动画：幻灯片-左-2 12s线性无限；
}
.画框图像：第n种类型（3）{
动画：幻灯片-左-3 12s线性无限；
}
.画框img：第n种类型（4）{
动画：幻灯片-左-4 12s线性无限；
}
.画框img：第n种类型（5）{
z指数：3；
动画：幻灯片-左-5 12s线性无限；
}
@关键帧向左滑动-1{
0%{右：-160px；}
10%，20%{右：0；}
30%，100%{右：160px；}
}
@关键帧滑动-左-2{
0%，20%{右：-160px；}
30%，40%{右：0；}
50%，100%{右：160px；}
}
@关键帧滑动-左-3{
0%，40%{右：-160px；}
50%, 6