0

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/

リストをランダム化する方法と更新についても知りたかったので、すべてがランダムな順序になっていることを意味します

4

5 に答える 5

1

リストをランダム化するには、次を追加するだけです。これの利点は、フェード機能がランダム化されているのではなく、リスト自体がランダム化されているため、リストが毎回同じ順序でフェードし、すべてのアイテムが少なくとも 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') );

});

ライブデモ

于 2012-10-25T12:43:17.630 に答える
0

あなたはそのようなことをすることができます: 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') );

});

</p>

于 2012-10-25T12:43:10.237 に答える
0 
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() を使用すると、問題を解決できます。例については、上記のコードを参照してください。

お役に立てれば！

于 2012-10-25T12:43:26.853 に答える
0

私はあなたのフィドルを更新しました：

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

});
于 2012-10-25T12:46:49.377 に答える
0 
(function() {
    $('p').show();
    var lis = $('li').hide();

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

})();
于 2013-04-08T05:14:27.570 に答える