Question

我正在尝试下面的代码来自动滑动图像，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>

使用上面的代码，只有12.jpg显示在窗口中，而不是11.jpg。

我的期望是：

首先，11.jpg应该显示
然后1秒后，11.jpg应该不可见，12.jpg应该可见。

Answer 1

这是一个异步问题。 setTimeout在循环运行完成后触发它回调。存储在x 中的值对于使用您提供的代码的循环的每次迭代都不会有所不同。

当setTimeout 最终调用此行时：
document.getElementById("images").appendChild(x);
x的值将是x之后的值循环的最后一次迭代。所以，如果你有5个元素，那么你就是 5次调用setTimeout 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);
}

Answer 2

For the setup you describe, it strikes me that you might be better off using

presentational CSS

rather than
behavioural javascript.

Here is an example:

.picture-frame {
position: relative;
width: 160px;
height: 160px;
background-color: rgb(15, 15, 127);
overflow-x: hidden;
}

.picture-frame img {
position: absolute;
top: 0;
right: -160px;
z-index: 6;
width: 160px;
height: 160px;
}

.picture-frame img:nth-of-type(1) {
animation: slide-left-1 12s linear infinite;  
}

.picture-frame img:nth-of-type(2) {
animation: slide-left-2 12s linear infinite;  
}

.picture-frame img:nth-of-type(3) {
animation: slide-left-3 12s linear infinite;  
}

.picture-frame img:nth-of-type(4) {
animation: slide-left-4 12s linear infinite;  
}

.picture-frame img:nth-of-type(5) {
z-index: 3;
animation: slide-left-5 12s linear infinite;  
}

@keyframes slide-left-1 {
      0% {right: -160px;}
 10%, 20% {right: 0;}
 30%, 100% {right: 160px;}
}

@keyframes slide-left-2 {
  0%, 20% {right: -160px;}
 30%, 40% {right: 0;}
 50%, 100% {right: 160px;}
}

@keyframes slide-left-3 {
  0%, 40% {right: -160px;}
 50%, 60% {right: 0;}
 70%, 100% {right: 160px;}
}

@keyframes slide-left-4 {
  0%, 60% {right: -160px;}
 70%, 80% {right: 0;}
 90%, 100% {right: 160px;}
}

@keyframes slide-left-5 {
        0% {right: 0;}
  10%, 20% {right: 160px;}
  30%, 80% {right: -160px;}
  90%, 100% {right: 0;}
}

<div class="picture-frame">
<img src="http://placekitten.com/150/150" />
<img src="http://placekitten.com/152/152" />
<img src="http://placekitten.com/153/153" />
<img src="http://placekitten.com/156/156" />
<img src="http://placekitten.com/158/158" />
</div>

Explanation:

There are two types of CSS animated presentation. Simple animations (usually involving a simple shift from one state to another and back) can be described using transition:.

More complex animations (like the animations above) are handled using animation: and a corresponding @keyframes set of sequenced animation rules.

In the example above the default starting position of all five images is just to the right of their parent container. Since the latter has a declaration of overflow-x: hidden all five images are effectively out of sight.

Then, each image has its own animation which describes:

how long it remains out of sight to the right of the container
when it slides leftwards into the parent container (and how long that slide takes)
how long it remains in view in the middle of the container
when it slides leftwards out of the parent container (and how long that slide takes)

Each separate image animation takes place simultaneously over a 12 second period. The entire set of animations then begins again and runs for 12 seconds. And so on ad infinitum.

For instance this animation:

@keyframes slide-left-3 {
  0%, 40% {right: -160px;}
 50%, 60% {right: 0;}
 70%, 100% {right: 160px;}
}

Describes the following:

Between 0% and 40% of 12 seconds, remain in the initial out of sight position (right of the parent)
Between 40% and 50% of 12 seconds move leftwards fully into sight
Between 50% and 60% of 12 seconds remain fully in sight
Between 60% and 70% of 12 seconds move leftwards fully out of sight
Between 70% and 100% of 12 seconds remain fully out of sight (left of the parent)

The entire set of animations is structured so that when one image is sliding out of view, the next image is always sliding into view.

Answer 3

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

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();

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

3 个答案: