[英]I am trying to show an image from an array of images - javascript
I have one image showing on my homepage and want the user to click next image button so the next image in the array displays.我的主页上显示了一个图像,并希望用户单击下一个图像按钮,以便显示数组中的下一个图像。 I have seen similar questions and have tried resolving the issue, but nothing seems to work.我见过类似的问题并尝试解决问题,但似乎没有任何效果。 I think the code is correct I just can't seem to get the images to display when the user hits 'Next Image'.我认为代码是正确的,当用户点击“下一个图像”时,我似乎无法显示图像。 Any recommendations would be greatly appreciated.任何建议将不胜感激。
JS: JS:
var images = ["/aboutmepages/imagesAM/SSR.jpeg", "/aboutmepages/imagesAM/ATA.png",
"/aboutmepages/imagesAM/BC.jpg", "/aboutmepages/imagesAM/GCU.jpg"
];
var current = 0; //current image displayed
var change_img = document.getElementById("placeholder");
function next() {
if (current >= 0) {
current = images.length;
current++;
}
change_img.src = images[current].src;
}
HTML HTML
<img src="/aboutmepages/imagesAM/SSR.jpeg" id="placeholder">
<div id="display">
<button class="button" onclick="next()">Next Image</button>
</div>
You have to add src
as the image
in the images
array with using the current
index你必须添加src
的image
中images
阵列使用current
指数
function next() {
if (current === images.length) current = 0;
change_img.src = images[current++];
}
NOTE: I've used lorem-picsum for demo purpose. You can add yours link
var images = [ "https://picsum.photos/200/300", "https://picsum.photos/200", "https://picsum.photos/200/300", "https://picsum.photos/200", "https://picsum.photos/200/300", "https://picsum.photos/200" ]; var current = 0; //current image displayed var change_img = document.getElementById("placeholder"); function next() { if (current === images.length) current = 0; change_img.src = images[current++]; } const button = document.querySelector("button"); button.addEventListener("click", next);
<div id="display"> <button class="button">Next Image</button> </div> <img src="https://picsum.photos/200" id="placeholder" />
The key issue is this line:关键问题是这一行:
change_img.src = images[current].src;
It should be它应该是
change_img.src = images[current];
as you don't have src
properties on any of the elements in the array, just strings at array indexes.因为数组中的任何元素都没有src
属性,所以只有数组索引处的字符串。
Instead of checking that current >= 0
(we already know that it's going to be zero), check that current
is less than the array length (because arrays use a zero-based index).与其检查current >= 0
(我们已经知道它将为零),不如检查current
是否小于数组长度(因为数组使用从零开始的索引)。
const images = [ 'https://dummyimage.com/100x100/00ff00/000', 'https://dummyimage.com/100x100/0000ff/fff', 'https://dummyimage.com/100x100/000/fff', 'https://dummyimage.com/100x100/fff/000', ]; const placeholder = document.getElementById('placeholder'); const button = document.querySelector('button'); button.addEventListener('click', next, false); let current = 0; function next() { if (current < images.length) { placeholder.src = images[current]; ++current; } } next();
<button>Next</button> <img id="placeholder" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.