1

假设我有这些图片库，每次重新加载页面时如何随机显示图片？

http://creativepreviews.com/fiddle/study/20131007/

4

2 回答 2

1

假设图像将显示在 DIV 的背景中，那么下面应该这样做。

// JS

var imgArray = ["img1.jpg", "cat.jpg", "sky.jpg"]

function randomBg() {
    x = Math.random()
    y = Math.round(x * 10)
    if (imgArray[y] != undefined) {
        document.getElementById("blah").style.backgroundImage = "url('" + imgArray[y] + "')"
    } else {
            document.getElementById("blah").style.backgroundImage = "url('default.jpg')"
    }    
}

...和 ​​HTML。

<script src="test.js"></script>
<body onload="randomBg()">
<div id="blah"></div>

...或者您可以将style.backgroundImageJS 中的替换为innerHTML = <img src="etc...

于 2013-10-07T05:12:33.543 回答
0

您可以按照这些方式做一些事情（未经测试）

var grd = $('#grid');
var imgs = grd.children();
imgs.sort(function(){return (Math.round(Math.random()) - 0.5);});
grd.remove('li');
for(var i=0;i < imgs.length;i++) grd.append(imgs[i]);

本质上，我们所做的是将“网格”中的所有 li 元素放入一个数组中，将它们随机化，将它们全部从“网格”中删除，然后再将它们放回原处。

如果您提供了一个工作小提琴而不是完成文章的链接，那么修改它并提供更完整的解决方案会更容易。

于 2013-10-07T04:49:15.270 回答