Question

HTML

<ul id="content">
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
</ul>

jquery的

function InOut( elem )
{
 elem.delay('1')
     .fadeIn('3000')
     .delay('5000')
     .fadeOut(
               function(){
                   if(elem.next().length > 0)
                   {InOut( elem.next() );}
                   else
                   {InOut( elem.siblings(':first'));}

                 }
             );
}

$(function(){
$('#content li').hide();
InOut( $('#content li:first') );

});

这是盖比的工作，下面是他的小提琴

这里是小提琴http://jsfiddle.net/gaby/S5Cjm/1/

只是想要如何随机列表和刷新，所以意味着一切都是随机顺序

Answer 1

只需添加以下内容即可随机化列表。这样做的好处是列表每次都会以相同的顺序淡化，每个项目至少循环一次，因为淡入淡出功能不是随机的，而是列表本身。

$(function(){
    // randomize the list
    var list = $("#content"),
        items = $("#content > li"),
        len = items.length;

    while(len--){
        var ran = Math.floor(Math.random()*len);
        list.append(items[ran]);
    }

    // hide it and do the fades.
    $('#content li').hide();
    InOut( $('#content li:first') );

});

<强> Live Demo

Answer 2

你可以这样做：http://jsfiddle.net/S5Cjm/1180/

function InOut( elem )
{
 elem.delay()
     .fadeIn()
     .delay()
     .fadeOut( 
               function(){                    
                   InOut($(jQuery("li").get().sort(function(){ 
                      return Math.round(Math.random())-0.5
                    }).slice(0,1)))                         
                 }
             );
}

$(function(){
$('#content li').hide();
InOut( $('#content li:first') );

});

Answer 3

function InOut( elem )
{
 elem.delay()
     .fadeIn()
     .delay()
     .fadeOut( 
               function(){ 
                   if(elem.siblings().length > 0)
                   {InOut( $(elem.siblings('*')[Math.floor(Math.random() * elem.siblings().length)]));}
                   else
                   {InOut( elem.siblings(':first'));}

                 }
             );
}

$(function(){
$('#content li').hide();
InOut( $('#content li:first') );

});

使用Math.random（）可以解决您的问题。有关示例，请参阅上面的代码。

希望这有帮助！

Answer 4

我更新了你的小提琴：

http://jsfiddle.net/S5Cjm/1179/

JS

function InOut( elem )
{
    var ran = Math.floor((Math.random()*6)+1);
 elem.delay().fadeIn().delay().fadeOut(function(){ 
     InOut(elem.parent().find('li:nth-child('+ran+')'));
 });
}

$(function(){
$('#content li').hide();
InOut( $('#content li:first') );

});

Answer 5

(function() {
    $('p').show();
    var lis = $('li').hide();

    $('a').click(function() {
        var i = 0;
        (function displayImages() {
            lis.eq(i++).fadeIn(200, displayImages);
        })();
    });

})();

随机淡入淡出列表刷新

5 个答案: