Question

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

JS - HTML

<script type="text/javascript">
        var img1 = new Image();
        img1.src="slide_show/1.jpg";
        var img2 = new Image();
        img1.src="slide_show/2.jpg";
        var img3 = new Image();
        img1.src="slide_show/3.jpg";
        var img4 = new Image();
        img1.src="slide_show/4.jpg";

    </script>

JS

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

HTML

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

Answer 1

您的代码需要进行多项更正

无需创建图像数组，只需将值存储在普通字符串数组中即可。
无需使用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);
}

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

1 个答案: