javascript - 显示随机分区

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