Jquery 刷新时的随机淡入列表

HTML

这是加布的作品，下面是他的小提琴

这是小提琴

---

只是想了解如何随机列表和刷新，这意味着所有内容都是随机排列的

您可以这样做：

---

​

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

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') );

});

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

希望这有帮助

我更新了你的小提琴：

JS

---

你好，肉汤，谢谢你，但是有重复，可以不重复吗？当所有6个列表都显示出来后，再重复这6个。。。对不起，我有点新here@FrancisAlvinTan不想劫持，但我的答案就是这么做的。不客气，别忘了翻出有用的答案，点击绿色的勾号关闭主题。不幸的是，这与其他建议的答案有相同的问题，元素不会完全循环，你可以让同一个动作连续重复几次。它还假设始终只有6个列表项。

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') );

});

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') );

});

$(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') );

});

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') );

});

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') );

});

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

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

})();