Question

我目前正在利用其他用户编写的以下jquery来一次随机显示一个div。每个div显示相同的时间。

var divs = $('.parent').children('.child'), //fetch all the divs
    len = divs.length, //number of divs on page
    randomDiv, //random number that will be generated
    speed = 10000; //interval in miliseconds for the new div to appear
var interval = setInterval(function () {
    randomDiv = Math.floor(Math.random() * len);
    divs.removeClass('show');
    divs.eq(randomDiv).addClass('show');
}, speed);

HTML

<div class="parent">
    <div class="child" id="one">One</div>
    <div class="child" id="two">Two</div>
    <div class="child" id="three">Three</div>
</div>

CSS

.child{display:none;}
.child.show{display: block;}

我要求每个由id唯一标识的div（如果需要，还有其他类名）在指定的时间段内显示。例如div id'one'显示8秒，div id 2显示7秒，div id 3显示19秒，等等。

我怀疑解决方案位于速度变量中的某个位置，我只是不能把它放在一起。

当每个div出现/消失时，也可以实现基于jquery的淡入/淡出。

非常感谢。

Answer 1

这样的事情怎么样？

var interval = setInterval(function () {
    randomDiv = Math.floor(Math.random() * len);
    divs.removeClass('show');
    divs.eq(randomDiv).addClass('show');
    setTimeout(function() {
        divs.eq(randomDiv).removeClass('show');
    }, speed);
}, speed);

Answer 2

<强> *更新

试试这个：

var divs = $('.parent').children('.child'), //fetch all the divs
        len = divs.length, //number of divs on page
        randomDiv, //random number that will be generated
        speed;

function start() {
    var rand = Math.floor(Math.random() * len);
    var id;
    while (rand == randomDiv) {
        rand = Math.floor(Math.random() * len);
    }
    randomDiv = rand;
    id = divs.eq(randomDiv).attr('id');
    if (id === 'one') {
        speed = 2000;
    } else if (id === 'two') {
        speed = 4000;
    } else if (id === 'three') {
        speed = 8000;
    }
    divs.removeClass('show');
    divs.eq(randomDiv).addClass('show');
    setTimeout(function() {
        start();
    }, speed);
}

start();

Demo Link

如何随机显示一个div，每个显示长度的定义持续时间？

2 个答案: