Question

我有一个id为“imgArea”的div，我试图用JS每隔3秒更改一次背景图像。以下是JS。没有显示图像。我错过了什么谢谢。

imgArea = document.getElementById("picArea");

var images = [
  "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Garmisch-Partenkirchen.JPG/1200px-Garmisch-Partenkirchen.JPG", "https://www.reisenaktuell.com/.imaging/mte/atlas-theme/atlas-gallery/dam/hotels/eigenanreisen/v/hotel-vier-jahreszeiten-garmisch-partenkirchen/bilder/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg/jcr:content/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg", "https://www.alpenferienwohnungen.de/assets/images/a/Garmisch-Partenkirchen-08-6335188a.jpg", "http://www.garmisch-partenkirchen-info.de/header/garmisch-partenkirchen.jpg" ];
var currentImage = 0;

function changeImage() {
    currentImage++;
    if (currentImage > images.length - 1) {
        currentImage = 0;
    }

    imgArea.style.backgroundImage = "url(" + images[currentImage] + ")";

}

可以在此codepen中看到div和代码： https://codepen.io/centem/pen/rdjrLy

Answer 1

<div id="imgArea" style="min-width:50px;min-height:50px;"></div>

imgArea = document.getElementById("imgArea");

var images = [
  "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Garmisch-Partenkirchen.JPG/1200px-Garmisch-Partenkirchen.JPG", "https://www.reisenaktuell.com/.imaging/mte/atlas-theme/atlas-gallery/dam/hotels/eigenanreisen/v/hotel-vier-jahreszeiten-garmisch-partenkirchen/bilder/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg/jcr:content/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg", "https://www.alpenferienwohnungen.de/assets/images/a/Garmisch-Partenkirchen-08-6335188a.jpg", "http://www.garmisch-partenkirchen-info.de/header/garmisch-partenkirchen.jpg" ];
var currentImage = 0;

function changeImage() {
	currentImage++;
	if (currentImage > images.length - 1) {
		currentImage = 0;
	}

	imgArea.style.backgroundImage = "url(" + images[currentImage] + ")";

}
//call first time
changeImage();
setInterval(changeImage, 3000);

<div id="imgArea" style="min-width:500px;min-height:500px;"></div>

Answer 2

请使用此fiddle

imgArea = document.getElementById("picArea");

var images = [
  "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Garmisch-Partenkirchen.JPG/1200px-Garmisch-Partenkirchen.JPG", "https://www.reisenaktuell.com/.imaging/mte/atlas-theme/atlas-gallery/dam/hotels/eigenanreisen/v/hotel-vier-jahreszeiten-garmisch-partenkirchen/bilder/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg/jcr:content/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg", "https://www.alpenferienwohnungen.de/assets/images/a/Garmisch-Partenkirchen-08-6335188a.jpg", "http://www.garmisch-partenkirchen-info.de/header/garmisch-partenkirchen.jpg" ];
var currentImage = 0;

function changeImage() {
	currentImage++;
	if (currentImage > images.length - 1) {
	  currentImage = 0;
	}
	imgArea.style.backgroundImage = "url(' "+ images[currentImage] + "')";

}
setInterval(function(){
	changeImage();
}, 3000);

#picArea{
  width:500px;
  height:500px;
}

<div id="picArea" ></div>

Answer 3

首先选择器是错误的，你选择'picArea'而你的元素名称是'imgArea'然后你也没有调用该函数，你只是声明了它。

您应该致电changeImage()

Answer 4

imgArea = document.getElementById("picArea");

var images = [
  "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Garmisch-Partenkirchen.JPG/1200px-Garmisch-Partenkirchen.JPG", "https://www.reisenaktuell.com/.imaging/mte/atlas-theme/atlas-gallery/dam/hotels/eigenanreisen/v/hotel-vier-jahreszeiten-garmisch-partenkirchen/bilder/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg/jcr:content/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg", "https://www.alpenferienwohnungen.de/assets/images/a/Garmisch-Partenkirchen-08-6335188a.jpg", "http://www.garmisch-partenkirchen-info.de/header/garmisch-partenkirchen.jpg" ];
var currentImage = 0;

function changeImage() {
    currentImage++;
    if (currentImage > images.length - 1) {
        currentImage = 0;
    }
    imgArea = document.getElementById("#urid");


}

使用JS更改Div中的背景图像

4 个答案: