gpt4 book ai didi

javascript - 使用 jquery 随机化 div 显示和隐藏的顺序

转载 作者:行者123 更新时间:2023-12-02 18:42:59 25 4
gpt4 key购买 nike

目前我正在使用从另一篇文章中获得的 jquery 代码来淡入和淡出一些 div

<script>
$(document).ready(function () {
var divs = $('div[id^="feature-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(400)
.delay(5000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();
});
</script>

循环浏览一些 div,使它们以一种随意的幻灯片方式淡入和淡出。我想随机化页面加载时的显示顺序,例如现在它显示功能 1,然后是功能 2,然后是功能 3。我怎样才能让它随机化该顺序,就像有时 onload 会显示 feature-3、feature-1、feature-2,有时它会显示 feature-2、feature-1、feature-3 等。我尝试创建一个数组,然后随机化 1 到 10 之间的数字并将它们放入索引 0-9 中,但在我尝试后根本无法显示它。这是一个 jfiddle 来展示它正在做什么。

http://jsfiddle.net/gthes/

最佳答案

使用Math.Random()

http://www.w3schools.com/jsref/jsref_random.asp

示例:1到6的随机数

$(document).ready(function () {
var divs = $('div[id^="feature-"]').hide(),
i = 0,
lastIndex=-1;
(function cycle() {
do{
i = Math.floor((Math.random()*6));
}while(i==lastIndex);

divs.eq(i).fadeIn(400)
.delay(5000)
.fadeOut(400, cycle);

lastIndex=i;

})();
});

关于javascript - 使用 jquery 随机化 div 显示和隐藏的顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16697373/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com