javascript - 一个简单的 JavaScript 代码不起作用@_@

Question

好的，事情是这样的，我为幻灯片放映编写了一个简单的代码，它可以工作，并且正如我所期望的那样，就是这样:

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

但是由于我还在学习javaScript，我想改变逻辑以适应自己的口味，我重写了代码，但它不起作用，我不知道为什么...... 希望有人能启发我为什么它不......

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

在第二种方法中，var imageName 被分配给一个静态值，即“_Images/Image_0”+imageNumber+“.jpg”，根据第一个答案，您需要重新计算该变量的值。

相反，您可以将 imageName 编写为返回计算值的函数

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

并在changeImage内部调用

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