使用for循环的Javascript图像幻灯片

Question

我正在尝试使用 javascript 中的 for 循环循环浏览 3 张图像。这是我的代码:

<img name="slide" width="300" height="300">

var i=0;
var images = [];

images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";

function changeImage () {

    for(i=0; i < images.length; i++) {
        document.slide.src = images[i]; 
    }
}


window.onload = changeImage;

目前只显示图3。有人知道我在这里做错了什么吗？

Answer 1

是的 - 这是因为您的 for 循环运行立即完成，所以没有时间显示幻灯片 1 和 2。

试一试:

var currentImage = 0,
images = [
    "https://unsplash.it/200/300?image=100",
    "https://unsplash.it/200/300?image=101",
    "https://unsplash.it/200/300?image=102"
];

function initSlideshow() {  
    setImage(0);
    setInterval(function(){
        nextImage();
    },1000);
}

function nextImage() {
    if(images.length === currentImage + 1){
        currentImage = 0;
    } else {
        currentImage++;
    }
    setImage(currentImage);
}

function setImage(image) {
    document.querySelectorAll('.slide')[0].src = images[image];
}

window.onload = initSlideshow();

示例:https://jsfiddle.net/vvbdwazc/