JSFiddle

Question

我正在尝试将这些div的负载随机化为我的主页。我有一些特定的CSS使其变得困难，否则我会做一些随机化图像的建议之一。谢谢你的帮助！

<div class="banner-images">

<div class="feature" style="background-image: url(images/typewriter.png)">
    <img  class="hero-poster" src="images/typewriter.png" />

    <div class="hero-decoration">
        <div class="side-l"></div>
        <div class="arrow"><img alt="Hero-triangle" src="images/triangle.png" /></div>
        <div class="side-r"></div>
    </div>
</div>

<div class="feature" style="background-image: url(images/printing.png)">
    <img  class="hero-poster" src="images/printing.png" />

    <div class="hero-decoration">
        <div class="side-l"></div>
        <div class="arrow"><img alt="Hero-triangle" src="images/triangle.png" /></div>
        <div class="side-r"></div>
    </div>
</div>

<div class="feature" style="background-image: url(images/newspaper.png)">
    <img alt="Releaser" class="hero-poster" src="images/newspaper.png" />

    <div class="hero-decoration">
        <div class="side-l"></div>
        <div class="arrow"><img alt="Hero-triangle" src="images/triangle.png" /></div>
        <div class="side-r"></div>
    </div>
</div>
</div>

Answer 1

这是你可以做到的一种方式：

$(document).ready(function() {
    var rand = Math.floor(Math.random()*3);
    var visibleDiv = $('.feature')[rand];
    $(visibleDiv).show();
});

生成一个随机数，然后显示与该数字一致的元素。

JSFiddle

Answer 2

我使用了我在网上找到的随机数组shuffle函数，因为我不想写一个，但是这是一个很好的方法。基本上，你将获取$('.feature')数组并将其随机播放，然后以随机顺序显示它们。

看起来像：

$(function() {
    var shuffle = function(o){
        for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    }
    var showArr = shuffle($('.feature'));
    $.each(showArr, function(k,v) { //key, value
        window.setTimeout(function() {
            $(v).css('opacity', 1);
        },k*1000);
    });
});

查看并在此处播放：http://jsfiddle.net/9bva204y/1/

同样，这只是一个基本的解释。你可以多玩一点，然后把它变得更漂亮等等。

显示随机分组

2 个答案:

JSFiddle