javascript - 需要在 Javascript 中按升序对图像列表进行排序

Question

感谢你们，我能够使用下面的 JavaScript 在我的网站每次刷新时随机更改背景图像。这很痛苦，因为图像位置位于 .css 文档中，而不是 .html 中。

我需要按升序显示图像，“1.jpg、2.jpg、3.jpg 等”一旦到达最后一个数字，它就会再次从 1.jpg 开始。

我已经研究和反复试验了两天，但没有运气。

 <script type="text/javascript">
var images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg'];
$('#parallax-header').css({'background-image': 'url(images/parallax/' +          
images[Math.floor(Math.random() * images.length)] + ')'});
</script>

Answer 1

为了实现这一点，浏览器需要记住刷新前的前一个图像是什么。 Cookie 或 localStorage 都可能发生这种情况。如果您的数组已按升序排列图像，则只需将图像的最后一个索引存储在浏览器的存储中，然后在每次刷新时将其加一。

jsfiddle :

// coerce the index to number just in case; if it is null, set it to 0
var i = +localStorage.getItem('i') || 0,
    next = 0,
    images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg'];

if(i === images.length - 1) {
    next = 0;
} else {
    next = i++;   
}

localStorage.setItem('i',next);

$('#parallax-header').css({'background-image': 'url(images/parallax/' +          
images[i] + ')'});

这是来自 MDN 的兼容性表对于本地存储:

如果您需要填充，请查看 Web Storage (LocalStorage and SessionStorage) from HTML5 Cross Browser Polyfills .