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/

Answer 2

目前，仅显示图像3。任何人都知道我做错了什么这里吗？

它全部显示但是你只能看到第三张图像的原因是因为你在显示下一张图像之前没有暂停一段时间因此它似乎无法正常工作。

使用setInterval()方法在指定时间后显示每张图片。

示例：

legacy-header-one legacy-header-two legacy-header-three

您稍后可能希望阻止setInterval()方法再执行，在这种情况下请查看clearInterval()。

Answer 3

这是因为for的工作速度非常快，很快就会到达第三张图像。您可以使用这样的setInterval：

<img id="slide" width="300" height="300">
<script>
    var images = [];

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

    var i = 0;
    setInterval(function() {
        var slide = document.querySelector("#slide"); //Select the img element by ID
        slide.src = images[i++];
        if(i > images.length - 1)
            i = 0;
    }, 1000); //Time in milliseconds
</script>

当它到达最后一张图像时，它会不断变回第一张图像。

编辑：忘了提。 setInterval就像一个“转发器”，它将无限期地工作，直到你清除它为止。要清除它，您需要将其设置为变量，然后使用clearInterval传递变量。

var interval = setInterval(function(){}, 1000) //example
clearInterval(interval);

喜欢这样。

Answer 4

window.onload = changeImage;告诉我你要更改页面加载事件的图像？换句话说，图像仅在页面加载（或刷新）时更改。

由于默认情况下不维护状态（例如本地存储或会话存储或cookie），您最好的选择是使用随机生成器随机选择。见Generating random whole numbers in JavaScript in a specific range?

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

4 个答案: