Question

我有一个循环遍历id = banner_1，id = banner_1，id = banner_3等标签的脚本......

我希望我的脚本循环遍历标签，但是按随机顺序，现在它们按数字顺序循环（1,2,3，等等......）

HTML：

<p id='banner-1'>one</p>
<p id='banner-2'>two</p>
<p id='banner-3'>three</p>

jQuery的：

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

提前致谢！

Answer 1

只需将Math.random()添加到i：

即可

i = (Math.random() * 100).toFixed(0) % divs.length;

Fiddle

Answer 2

下面是一个示例，它每次都会选择一个随机横幅，但不会两次显示相同的横幅。

(function cycle() {
    divs.eq(i).fadeIn(400).delay(3000).fadeOut(400, cycle);
    var old = i;
    while(old == i){
        i = (Math.random() * 100).toFixed(0) % divs.length;
    }

Fiddle

另一个例子是以随机顺序初始化横幅，然后保持相同的模式（顺序）。

 var orderArray = []; 
 while(orderArray.length < divs.length){
        i = (Math.random() * 100).toFixed(0) % divs.length;
        if(orderArray.indexOf(i) == -1){
            orderArray.push(i);    
        }
    }
    i = 0;
(function cycle() {
    divs.eq(orderArray[i]).fadeIn(400).delay(2500).fadeOut(400, cycle);
    var old = i;
    while(old == i){
        i = (Math.random() * 100).toFixed(0) % divs.length;
    }

Fiddle

取决于您的目标..

随机显示功能循环中的项目

2 个答案: