setattribute 运行 once on setinterval 函数

Question

我试图每 1 秒显示一次随机图像，它是 div 内没有 src 属性的图像：

<div class="D">

<img>   

</div>

这里是 css 代码：

 .D{

  height: 30%;
  width: 30%;
  left: 35%;
  top: 10%;
  position: absolute;

  }
  .D img{

  position: absolute;
  height: 100%;
  width: 100%;

  }

我有一个数组，其中包含来自文件夹的 4 个不同图像的 src，并且使用 Math random im 选择一个从 0 到 3 的随机数作为数组索引，并使用 setinterval[=23 重复该函数=]：

var inp = document.querySelector('.D'); var p = document.querySelector('.D img'); var Src= ['Imgs/home.png','Imgs/gps.png','Imgs/bell.png','Imgs/box.png']; var RndomFrom0To3 = Math.floor(Math.random()*4); function ChangeImgSrc() { p.setAttribute('src',Src[RndomFrom0To3]); }; setInterval(ChangeImgSrc,1000);

src 只改变了一次，它就停在了同一张图片中，我做错了什么？

Answer 1

你也应该在每次调用中调用随机生成器

function ChangeImgSrc() {
    var RndomFrom0To3 = Math.floor(Math.random()*4);
    p.setAttribute('src',Src[RndomFrom0To3]);


    };

setattribute 运行 once on setinterval 函数

setattribute run once on setinterval function

html

javascript

css

setattribute

setinterval