一个不起作用的简单javaScript代码@ _ @

Question

OK, here is the thing, I wrote a simple code for a slide show, it works and it's as I expected and that's it:

var slideShowImage = document.getElementById("slideShowImage");
var images = ["_Images/Image_01.jpg","_Images/Image_02.jpg","_Images/Image_03.jpg","_Images/Image_04.jpg","_Images/Image_05.jpg","_Images/Image_06.jpg","_Images/Image_07.jpg"];
var imageIndex = 0;

function changeImage (){
    slideShowImage.setAttribute ("src",images[imageIndex]);
    imageIndex++;
    if (imageIndex >= images.length){
            imageIndex = 0;
        }   
    }

setInterval (changeImage,3000);

But as I'm still learning javaScript I thought to change the logic to taste myself, and I rewrote the code, but it doesn't work, I have no idea why... Hopefully someone can enlighten me with why it doesn't...

var imageId = document.getElementById("slideShowImage");
var imageNumber = 1;
var imageName = "_Images/Image_0"+imageNumber+".jpg";

function changeImage (){
    imageId.setAttribute("Src",imageName);
    imageNumber++;
    if (imageNumber==7){
        imageNumber=1;
        }
    }
setInterval(changeImage,1000);

Answer 1

in second approach the var imageName is assigned to a static value ie "_Images/Image_0"+imageNumber+".jpg", as per the first answer you need to recalculate the value of this variable.

instead you can write imageName as function which returns the calculated value

var imageName = function(){ return "_Images/Image_0"+imageNumber+".jpg"; }

and call inside changeImage

function changeImage (){
    imageId.setAttribute("Src",imageName());
    imageNumber++;
    if (imageNumber==7){
        imageNumber=1;
        }
    }

Answer 2

var imageName = "_Images/Image_0"+imageNumber+".jpg";

You need to update imageName each time the number changes. Otherwise this string is fixed to Image_01.jpg.

Answer 3

Your imageName variable is never being updated. You have to update it on each chageImage call.

var imageId = document.getElementById("slideShowImage");
var imageNumber = 1;
var imageName = "_Images/Image_0"+imageNumber+".jpg";

function changeImage (){
    imageNumber++;
    imageName = "_Images/Image_0"+imageNumber+".jpg";
    imageId.setAttribute("Src",imageName);
    if (imageNumber==7){
        imageNumber=1;
    }
}
setInterval(changeImage,1000);

Answer 4

The error you've made is that the image name in your version is not evaluated once per iteration.

var imageId = document.getElementById("slideShowImage");
var imageNumber = 1;
setInterval(function() {
  imageId.setAttribute("src","_Images/Image_0"+imageNumber+"jpg");
  imageNumber++;
  if (imageNumber == 7) imageNumber = 1;
},1000);

This will result in your code actually working. I took the image path and brought it in the function so it gets evaluated on each iteration, which was the main bug.

Bear in mind, your images will not load instantly; Setting them to 1s per transition is unwise. In practice, you want to preload all of them in the background somewhere invisible, which guarantees instant recall.

Answer 5

you can replase your code imageId.setAttribute("Src",imageName); with the follwoing imageId.src = imageName;