Question

我有一堆图像，一些JS代码在图像之间消失。

活动图像具有“活动”类。

如何设置一个随机图像以使该类永远不会从页面加载的同一位置开始？

<div id="quote">
    <img class="active" src="http://dicktyler.com/dev/images/quote1.png" />
    <img src="http://dicktyler.com/dev/images/quote2.png" />
    <img src="http://dicktyler.com/dev/images/quote3.png" />
    <img src="http://dicktyler.com/dev/images/quote4.png" />
</div>

Answer 1

你可以这样做：

var items = $('#quote img');
var random = Math.floor(Math.random() * items.length);
items.eq(random).addClass('active');

<强> JSFiddle Demo

这会在0和img length之间生成一个数字，在这种情况下为4。然后我们可以使用eq()选择带有随机生成数字的图像。

Answer 2

最简单的方法是在jQuery对象中获取所有img。接下来使用eq从列表中选择特定的一个。对于eq使用Math.random() * $imgs.length的值，这将为您提供介于0和0之间的数字。然而，许多图像都是独一无二的。

var $imgs = $('#quote img');

$imgs.eq(Math.floor(Math.random() * $imgs.length)).addClass('active');

Answer 3

我会做什么：

首先计算图像

total_images = $('#quote img').length;

然后生成0到总数

之间的随机数

random_num = Math.random() * (total_images - 0) + 0;

然后通过选择#quote

的子项将活动类分配给它

$('#quote img:nth-child(random_num)').addClass('active');

使它成为一个功能：

function set_random_img(div){
    total_images = $('#'+div+' img').length;
    random_num = Math.random() * (total_images - 0) + 0;
    $('#'+div+' img:nth-child(random_num)').addClass('active');
}

并称之为：

set_random_img('your_div_id');

在div中设置随机<img/>以获得类

3 个答案: