每2秒随机化图片Javascript

Question

我想在我的网页中每2秒随机分配三张图片。

目前这是我的代码

function randomImage() {
  var fileNames = [
    "image1.png",
    "image2.jpg",
    "image3.png"
  ];
  var randomIndex = Math.floor(Math.random() * fileNames.length);
  document.getElementById('#background').innerHTML = 'url(' +
    fileNames[randomIndex] + ')';
}
randomImage();
setInterval(randomImage, 1000);

我认为存在语法错误，因为没有任何显示。 我已经审核了几次，但是由于我对Java还是很陌生，所以要花很长时间。 请帮忙，谢谢！

Answer 1

应该

document.getElementById('background').style.background

Answer 2

我认为这应该工作（ 注意：未经测试的代码）：

var randomImage = function() {

 var fileNames = [
    "image1.png",
    "image2.jpg",
    "image3.png",
];

var randomIndex = Math.Round(Math.random() * fileNames.length);

//Change myImage to the id of your image. (example: <img id = "myImage" src = "meme.png"></img>)
document.getElementById("myImage").src = filesNames[randomIndex];
};

randomImage();
setInterval(randomImage, 1000);

Answer 3

您需要设置目标元素的style.backgroundImage属性，而不是innerHtml 。 另外，在使用getElementById DOM查询时，您不应仅包含ID的名称。

function randomImage() {
  var fileNames = [
      "image1.png",
      "image2.jpg",
      "image3.png"
    ],
    randomIndex = Math.floor(Math.random() * fileNames.length),
    backgroundImage = 'url(' + fileNames[randomIndex] + ')';

  document.getElementById('background').style.backgroundImage = backgroundImage;
}

randomImage();
setInterval(randomImage, 1000);

Answer 4

如果要更改图像位置的URL， .innerHTML字符串解析为HTML，有两种常见的情况适用：

使用<img>标签

  <img src="image1.png"> document.querySelector('img').src = `image${i}.png`; 

使用样式属性的JS属性imageBackground

  <figure class='bkg'></figure> document.querySelector('.bkg').style.imageBackground = `url(image${i}.png)`; 

---

似乎有些滞后，但是索引是随机的，因此：

2sec image1、2sec image1、2sec image1等... 已经是相同索引的6sec

长度为3的随机索引出现索引的机会是33％。 请注意控制台每2秒记录一次索引。

---

此演示使用[style]属性的display属性切换实际标签（将<b>替换为<img>或<div> ）。

演示

 function randomImage() { var images = Array.from( document.querySelectorAll('b')); var randomIndex = Math.floor(Math.random() * images.length); console.log(randomIndex); for (let img of images) { img.style.display = ''; } images[randomIndex].style.display = 'block'; } setInterval(randomImage, 2000); 

 b { display: none; font-size: 40vh; text-align: center; } .as-console-wrapper { width: 30%; margin-left:70%; min-height: 100% } 

 <figure class='bkg'> <b>🍔</b><b>🍟</b><b>🥛</b> </figure> 

Answer 5

尝试这个 ：

 var ele = document.getElementById ('background') ; var fileNames = [ "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeY54SaYkaOxxyXlu_ng21EMIBZvJjnZBNQAOsIh_0_6Tvu9et" ] ; function randomImage() { var randomIndex = Math.floor(Math.random() * fileNames.length); ele.style.backgroundImage = 'url(' + fileNames[randomIndex] + ')' ; } randomImage() ; setInterval(randomImage, 1000) ; 

 #background { width: 200px; height:150px; } 

 <p id="background"></p>