Question

我目前正在使用一小段JavaScript，通过按下按钮使页面背景图像在一系列图片中循环。

但是，一旦用户到达最后一张图片，阵列就不会循环回到起点。

我不完全确定发生了什么，但是当我实现会话存储以使背景图像在页面重新加载和加载之间持续存在时，出现了问题。

我使用的代码是这样的：

var bodyObj, imgSrc, index;

bodyObj = document.getElementById('bgChange'); // For the button used to trigger the image change)

index = 0;

imgSrc = ['', 'jill.gif', 'shimmer.gif', 'lightpollution.gif', 'crystal.gif', 'rain.gif', 'puke.gif', 'town.gif']; // The array of pictures

maxIndex = Object.keys(imgSrc).length;

function updateIndex() { // The cyclic array
    index += 1;
    if (index > maxIndex) {
        index = 0;
    }
    sessionStorage.clear(); // Session storage
    sessionStorage.setItem('img', JSON.stringify(imgSrc[index]))
}

window.onload = function() { // Session storage
    main.style.backgroundImage = 'url("' + JSON.parse(sessionStorage.getItem('img')) + '")';
    main.style.backgroundSize = "cover";
};

bodyObj.onclick = function() { // Trigger background image change on button press
    main.style.backgroundImage = 'url("' + JSON.parse(sessionStorage.getItem('img')) + '")';
    main.style.backgroundSize = "cover";
    updateIndex();
}

Answer 1

在您的updateIndex函数中，使用if(index > maxIndex - 1) 由于数组索引从0开始。如果您的长度为5，则索引以4结尾

Answer 2

（代表问题作者发布了解决方案）。

该死，现在我觉得自己很哑巴。我记得当我试图弄清楚会话存储时，Ctrl + Z多次遍历了代码，这可能就是我设法解决了这一愚蠢的事情。谢谢，尖尖的人和医生。

如何在JavaScript中正确实现循环数组

2 个答案: