Question

我们（我和一些朋友）在网站上工作，我们希望在一个页面上显示4个图像，并且我们想要循环使用8个图像。我想我写了一个足够的剧本，但我的朋友都不认识JS，这是我第一次使用它。我不确定我在JS中是否有错误，或者在从HTML链接到它时遇到问题。 HTML文档名为“index.html”，在目录中有一个名为“js”的文件夹，其中包含我们将要使用的所有JavaScript。我们有一个名为“images”的文件夹，我们拿着所有图像。

这是JS代码：

var arregloImagen = new Array(
"../images/pic02.jpg",
"../images/pic03.jpg",
"../images/pic04.jpg",
"../images/pic05.jpg",
"../images/pic06.jpg",
"../images/pic07.jpg",
"../images/pic08.jpg",
"../images/pic09.jpg");
var contadorImagen =0;
function iniciaTiempo()  {
if(contadorImagen == arregloImagen.length){
    contadorImagen = 0;
    alert("Hello");
}
if(contadorImagen <= 4) {
    document.getElementById("img1").src = arregloImagen[contadorImagen];
    document.getElementById("img2").src = arregloImagen[contadorImagen+1];
    document.getElementById("img3").src = arregloImagen[contadorImagen+2];
    document.getElementById("img4").src = arregloImagen[contadorImagen+3];
}
else{
    switch (contadorImagen) {
        case 5:
            document.getElementById("img1").src = arregloImagen[contadorImagen-5];
            document.getElementById("img2").src = arregloImagen[contadorImagen];
            document.getElementById("img3").src = arregloImagen[contadorImagen+1];
            document.getElementById("img4").src = arregloImagen[contadorImagen+2];
            break;

        case 6:
            document.getElementById("img1").src = arregloImagen[contadorImagen-6];
            document.getElementById("img2").src = arregloImagen[contadorImagen-5];
            document.getElementById("img3").src = arregloImagen[contadorImagen];
            document.getElementById("img4").src = arregloImagen[contadorImagen+1];
            break;

        case 7:
            document.getElementById("img1").src = arregloImagen[contadorImagen-7];
            document.getElementById("img2").src = arregloImagen[contadorImagen-6];
            document.getElementById("img3").src = arregloImagen[contadorImagen-5];
            document.getElementById("img4").src = arregloImagen[contadorImagen];
            break;
    }

}
contadorImagen++;


setTimeout("iniciaTiempo()", 1000);
}

在这里我从HTML引用JS：

<head>
<script src="js/test.js"></script>
<script>
    iniciaTiempo();
</script>
</head>

Answer 1

以下是示例 - 修改以修复您的需求

<script>
var arregloImagen = new Array(
'../images/pic1.jpg',
"../images/pic2.jpg",
"../images/pic3.jpg",
"../images/pic4.jpg",
"../images/pic05.jpg",
"../images/pic06.jpg",
"../images/pic07.jpg",
"../images/pic08.jpg",
"../images/pic09.jpg");
var contadorImagen =2;

function iniciaTiempo()  {


if(contadorImagen <= 4) {
    document.getElementById("img1").src = arregloImagen[contadorImagen];

    var img=document.createElement("img");
    img.src=arregloImagen[contadorImagen];
    img.id="picture"+contadorImagen;
    var foo = document.getElementById("img"+contadorImagen);
    foo.appendChild(img);
}

}
</script>

<head>

</head>
<body>
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<div id="img4"></div>

<script>
    iniciaTiempo();
</script>

</body>

我无法让外部JavaScript工作

1 个答案: