Question

我在阵列中有4张图片

images = ["image1.png","image2.png","image3.png","image4.png"]

我想要一个JavaScript脚本，在页面加载时显示image1，但也要这样每3秒显示一次数组中的下一个图像，从而替换上一个图像。但是当它到达image4时，将恢复为image1。

编辑：有人问，到目前为止，这是我的代码：

<html>
<body>
<body onload = "myFunction()">
<img src ="image1.png" id = "target" >
<script>
    var counter = 0;
    var images = ["image1.png","image2.png","image3.png",image4.png"];
    function myFunction() {
       counter += 1
       if (counter > 4) {
           counter = 0
       }
       target = document.getElementById ("target").src = images[counter]
    }
</script>
</body>
</html>

如果发现任何错误，请通知我。我之前尝试过setInterval但是当页面加载时它只给了我image1。提前谢谢。

Answer 1

我真的不喜欢为什么人们立即投票而不是建议解决方案。你试过幻灯片吗？！不，也许他不想使用别人的代码，也许他不允许参加他的项目。

无论如何，首先你的图像数组中有一个引用错误。最后一项缺少报价。

然后你基本上可以添加像

这样的东西

<script language="javascript">
    var counter = 0;
    var images = ["image1.png", "image2.png", "image3.png", "image4.png"];

    function myFunction() {
       counter++;
       if (counter > 4) {
           counter = 0
       }
       target = document.getElementById ("target").src = images[counter];
       setTimeout("myFunction", 3000) // 3sec

    }
    window.onLoad = function(){
       myFunction(); 
    }
</script>

使用计时器JavaScript显示和更改图像

1 个答案: