Question

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

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

Answer 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.backgroundImage等替换JS中的innerHTML = <img src=" ...

Answer 2

你可以沿着这些方向做某事（未经测试）

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]);

本质上我们正在做的是将'grid'中的所有li元素放入一个数组中，随机化它们，将它们全部从'grid'中删除，然后再将它们重新放入。

如果您提供了工作小提琴而不是成品的链接，则更容易修改它并提供更完整的解决方案。

每次加载页面时显示随机div图像

2 个答案: