显示：阻止来自wihtin div的随机img

Question

我在DIV中有一堆JPEG，希望jQuery在页面加载时随机选择一个IMG给它一个内联显示：块类 - 加载的所有IMG都显示：none。这样，只有X个IMG中的一个将在视野中。我怎样才能做到这一点？

<style>
.randomJPEG img { display: none; }
</style>

<div class="randomJPEG">
<img src="01.jpg"/>
<img src="02.jpg"/>
<img src="03.jpg"/>
<img src="04.jpg"/>
<img src="05.jpg"/>
</div>

Answer 1

我为您创建了一个动态示例，使用Math.random()方法从您的元素中进行选择。需要img div个randomJPEG个孩子的数量来计算一个随机元素。

$(function() {
    var items = $('div.randomJPEG img').length;
    var rnd   = Math.floor(Math.random() * items);
    
    $("div.randomJPEG img").eq(rnd).css('display', 'block');
});

div.randomJPEG img {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="randomJPEG">
    <img src="http://via.placeholder.com/150/fff000/000000"/>
    <img src="http://via.placeholder.com/150/000fff/000000"/>
    <img src="http://via.placeholder.com/150/ff00ff/000000"/>
    <img src="http://via.placeholder.com/150/f0f0f0/000000"/>
    <img src="http://via.placeholder.com/150/f0000f/000000"/>
</div>

Answer 2

的jQuery

 25%  { transform: translate(10px, 10px); }

香草

$('img:nth-child('+Math.floor(Math.random()*5+1)+')').css('display','inline-block')