无预加载数组的简单JavaScript图像幻灯片

我对JS相当陌生。我已经创建了一个html页面，并希望包括一个图像滑块。它必须是自动的。我做了一些编码，当我检查控制台时，它正在运行，但图像正在改变。 当我用“getElementById（）”得到这个元素时，它说“sld”为null，（第7行），即“sld.src=eval（“img”+step+“.src”）”为null，他们说。我哪里做错了

JS-HTML

var img1=新图像（）；
img1.src=“slide\u show/1.jpg”；
var img2=新图像（）；
img1.src=“slide\u show/2.jpg”；
var img3=新图像（）；
img1.src=“slide\u show/3.jpg”；
var img4=新图像（）；
img1.src=“slide\u show/4.jpg”；

JS

var阶跃=2；
函数slideit（）
{
log（“我被叫”）；
控制台日志（步骤）；
var sld=document.getElementsByName（“sli”）；
sld.src=eval（“img”+step+“.src”）；
如果（步骤<3）{
console.log（“for循环”）；
step++；
}
否则{
步骤=1；
}
控制台日志（“超时”）；
setTimeout（“slideit（）”，250）；
}

HTML

---

您的代码中需要多次更正

• 无需创建图像数组，只需将值存储在纯字符串数组中即可
• 不需要使用document.getElementsByName，但可以改为使用document.getElementById。传递图像标记的ID
• 注意，您还需要更改setTimeout调用

更正后的代码如下所示

var img = ["slide_show/1.jpg", "slide_show/2.jpg", "slide_show/3.jpg", "slide_show/4.jpg"];

将您的JS更改为

var step = 2;
function slideit()
{
    console.log("i'm called");
    console.log(step);
    var sld = document.getElementsById("sli");
    sld.src = img[step];
    if (step < 3) {
        console.log("for loop");
        step++;
    }
    else{
        step = 1;
    }
    console.log("timeout");
    setTimeout(slideit, 250);
}

var阶跃=2；
函数slideit（）
{
log（“我被叫”）；
控制台日志（步骤）；
var sld=document.getElementsById（“sli”）；
sld.src=img[step]；
如果（步骤<3）{
console.log（“for循环”）；
step++；
}
否则{
步骤=1；
}
控制台日志（“超时”）；
设置超时（slideit，250）；
}

我想知道eval（）函数为什么不起作用？使用数组是很好的，但是你能按照我想要的方式修复它吗？每个图像一个变量，并使用eval（）函数。我确实使用了“getElementById（“slide_show”）”，但出现了错误，说“sld”是nullHi River，你说你不想使用预加载功能。使用图像对象，您的操作正好相反。eval应该适用于您的情况，但是分配给sld变量将产生数组而不是标量变量。如果您将其设置为null，那么您需要检查脚本何时被触发？是在初始化DOM树之前还是之后。最好在DOM树就绪后调用slideit函数。提示：Use document.onreadystatechange TypeError:sld为Null我尝试将图像从根目录分配到“sld”，但仍然无法更改图像。@RiverCRPhoenix，为什么不将id分配给img标记为

id=“sli”

，然后使用

document.getElementById

而不是

document.getElementsByName

。这肯定会奏效。同时打开请求捕获插件，它将指示在执行sld.src时是否发送服务器端请求。另外，在浏览器中启用错误报告功能。

<div id="main_section">
 <img name="sli" src="slideShow/1.1.jpg" id="slide_show"/>
</div>

var img = ["slide_show/1.jpg", "slide_show/2.jpg", "slide_show/3.jpg", "slide_show/4.jpg"];

var step = 2;
function slideit()
{
    console.log("i'm called");
    console.log(step);
    var sld = document.getElementsById("sli");
    sld.src = img[step];
    if (step < 3) {
        console.log("for loop");
        step++;
    }
    else{
        step = 1;
    }
    console.log("timeout");
    setTimeout(slideit, 250);
}