如何显示来自 JavaScript 数组/对象的图像？从第一个图像开始，然后单击到下一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25151339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display images from a JavaScript array/object? Starting with the first Image then onclick to the next
提问by user3889508
Attempting to load images from my JavaScript array and display the first one the array. I then need to add a function that will allow the next image in the array to be displayed and so on till the end of the array.
尝试从我的 JavaScript 数组加载图像并显示数组的第一个图像。然后我需要添加一个函数，该函数将允许显示数组中的下一个图像，依此类推，直到数组结束。
<script>
var images = [ '/images/1.png', '/images/2.png' ];
function buildImages() {
for (var i = 0; i < images.length; i++) {
document.createElement(images[i]);
}
}
</script>
</head>
<body>
<div onload="buildImages();" class="contents" id="content"></div>
</body>
Within the images array are paths to the images. They look like "server/images/05-08-2014-1407249924.png"
在图像数组中是图像的路径。它们看起来像“ server/images/05-08-2014-1407249924.png”
回答by Mritunjay
See I did it like bellow
看我像下面那样做
<script>
var images = ['img/background.png','img/background1.png','img/background2.png','img/background3.png'];
var index = 0;
function buildImage() {
var img = document.createElement('img')
img.src = images[index];
document.getElementById('content').appendChild(img);
}
function changeImage(){
var img = document.getElementById('content').getElementsByTagName('img')[0]
index++;
index = index % images.length; // This is for if this is the last image then goto first image
img.src = images[index];
}
</script>
<body onload="buildImage();">
<div class="contents" id="content"></div>
<button onclick="changeImage()">NextImage</button>
</body>
I was not sure divhas an onloadevent or not so I called onloadof body.
我不确定div是否有onload活动，所以我打电话onload给身体。
回答by khakiout
// the container
var container = document.getElementById('content');
for (var i = 0; i < images.length; i++) {
// create the image element
var imageElement = document.createElement('img');
imageElement.setAttribute('src', images[i]);
// append the element to the container
container.appendChild(imageElement);
}
For more information on how to perform DOM manipulation/creation, read up on MDNand other resources. Those will help a lot in your development.
有关如何执行 DOM 操作/创建的更多信息，请阅读MDN和其他资源。这些对你的发展有很大帮助。
回答by lucas
<body>
<img id="thepic"/>
<input type="button" id="thebutt" value="see next"/>
<script>
(function (){
var images = ['img/background.png','img/background1.png','img/background2.png','img/background3.png'];
var imgcnt = 1;
function changeIt() {
if(imgcnt<images.length){
document.getElementById("thepic").src=images[imgcnt++];
} else{
console.log("done")
}
}
document.getElementById("thepic").src=images[0];
document.getElementById("thebutt").onclick=changeIt;
})();
</script>
</body>
