Last image is getting displayed out of full list of images in JavaScript

Question

I am trying below code to get auto-slide for images that is 4 to 5 images should appear one after another continuously. For this I wrote below code using for loop and setTimeout to delay images till end of list.

The problem I am facing here is I am able to view the image after some delay but I am able to see only last image of the list not all images.

Unable to trace out the issue.

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

With above code only 12.jpg is shown in window but not 11.jpg.

My expectation is:

• firstly, 11.jpg should get displayed
• then 1 second later, 11.jpg should be invisible and 12.jpg should be visible.

Answer 1

This is an asynchronous issue. setTimeout triggers it callback after the loop has finished running. The value stored in x will not be different for each iteration of the loop with the code you provided.

When setTimeout eventually calls this line:

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

the value of x is going to be whatever the value of x is after the last iteration of the loop. So if you have 5 elements , you'll be making 5 calls to setTimeout where x.src === "Images"+ima[4]

---

To get round this you can use a closure to keep the scope of the x variable intact when it is called:

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

Problem is you are calling timeout twice in your loop. Try this instead

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