定时更换图片

Question

定时更换图片

4

我知道这个问题经常被问到，但我无法复制代码。我希望图片在一段时间后更换。我认为我犯了很多错误的编码错误。以下是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="/css/styles.css">
    </head>
    <body>
        <img id="image" src="foto1.jpg">

        <script type = "text/javascript">
            var image=document.getElementById("image");

            function volgendefoto() {
                if (images==0) {
                    image.src="foto2";
                }

                if (images==1) {
                    image.src="foto2";
                }
                if (images==3) {
                    image.src="foto1";
                }
            }

            function timer(){
                setInterval(volgendefoto, 3000);
            }

            var images= [], x = -1;
            image[0]="foto1.jpg";
            image[1]="foto2.jpg";
            image[2]="foto3.jpg";
        </script>
    </body>
</html>

感谢您提前的帮助。 Jasper

- user7104802

“无法复制代码”？听起来像是学校作业。在我那个年代，我们知道如何复制粘贴并更改变量名称 ;) - xShirase

是的，这是为了学校。如果我复制它，那就太明显了，他们会知道我的编码习惯和常见错误 :) - user7104802

@xShirase，哈哈没错 - AzizurRahamanCA

2个回答

3

如果您没有创建间隔，计时器将不会执行。以下是一个可以循环播放您的图片的方法，假设您预加载的第一张图片是images（例如：在页面加载时，images [0] === image.src）：

  const image=document.getElementById("image");
  let images= ["foto1.jpg","foto2.jpg","foto3.jpg"], i = 0;

  function volgendefoto() {
      i<images.length?i+=1:i=0; 
      image.src=images[i];
  }
  setInterval(volgendefoto, 3000);

- xShirase

谢谢您的快速回答！我已经采纳了上面的答案，因为我能够理解那个答案！您的代码对我来说有点复杂。 - user7104802

1

const 和 let 是 ES6 的声明，你的老师应该强制让你使用它们 :p 而三元表达式只是一个 if。 - xShirase

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ixpl0 · Accepted Answer

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="/css/styles.css">
    </head>

    <body>
        <img id="image" src="foto1.jpg">

        <script type = "text/javascript">
            var image = document.getElementById("image");
            var currentPos = 0;
            var images = ["foto1.jpg", "foto2.jpg", "foto3.jpg"]

            function volgendefoto() {
                if (++currentPos >= images.length)
                    currentPos = 0;

                image.src = images[currentPos];
            }

            setInterval(volgendefoto, 3000);
        </script>
    </body>
</html>