按一个顺序循环，然后返回另一个顺序

Question

我试图在UrbanAirship.com上实现类似的效果，同时提供一个更长的淡入过渡。我已经实现了一个单向褪色使用多个UL，与隐藏的李氏在他们下面，并使用淡出效果。我已经通过Cycle2 JQUERY实现了这一点，但我也使用了一些定制的InOut代码来实现它。我已经得到了一个数据速度属性，我已经分配给李，试图让淡色返回到主要的李，但在一个循环后，他们变得异常。

下面是HTML：

    <ul class="row" id="community-rotator">
<li>
    <ul class="logos-1">
        <li data-speed="5000"><img src="Leukemia&LymphomaSociety.png"></li>
        <li data-speed="10000"><img src="BoysAndGirlsClub.png"></li>
        <li data-speed="2000"><img src="SusanKomenPhoenix.png"></li>
    </ul>
</li>
<li>
    <ul class="logos-2">
        <li data-speed="6000"><img src="AmericanCancer.png"></li>
        <li data-speed="8000"><img src="NotreDamePrep.png"></li>
        <li data-speed="4000"><img src="ChronsFoundation.png"></li>
    </ul>
</li>
<li>
    <ul class="logos-3">
        <li data-speed="7000"><img src="RonaldMcDonaldHouse.png"></li>
        <li data-speed="6000"><img src="SusanKomenFlorida.png"></li>
        <li data-speed="6000"><img src="DMHS.png"></li>
    </ul>
</li>
<li>
    <ul  class="logos-4">
        <li data-speed="8000"><img src="phoenixchildrens.png"></li>
        <li data-speed="4000"><img src="MIKID.png"></li>
        <li data-speed="8000"><img src="RonanThompsonFoundation.png"></li>
    </ul>
</li>
<li>
    <ul  class="logos-5">
        <li data-speed="9000"><img src="100club.png"></li>
        <li data-speed="2000"><img src="ASU.png"></li>
        <li data-speed="10000"><img src="SunshineAcres.png"></li>
    </ul>
</li>

​

这是黑客的Javascript：

        function InOut( elem ) 
{
    var delaySpeed = elem.data('speed')
    elem.delay()
    .fadeIn(500)
    .delay(delaySpeed )
    .fadeOut(
        500,
        function(){
            if(elem.next().length > 0)
                {InOut( elem.next() );}
            else
                {InOut( elem.siblings(':first'));}
        }
        );
}

$('.logos-1 li').hide();
InOut( $('.logos-1 li:first'));

$('.logos-2 li').hide();
InOut( $('.logos-2 li:first'));

$('.logos-3 li').hide();
InOut( $('.logos-3 li:first'));

$('.logos-4 li').hide();
InOut( $('.logos-4 li:first'));

$('.logos-5 li').hide();
InOut( $('.logos-5 li:first'));

任何帮助都将是非常感谢的，我对整个编程都很陌生:)

谢谢!

Answer 1

与其重新发明方向盘，不如看看众多jquery滑块中的一个。或者，您可以查看JS和CSS框架，该框架已经充实了这类内容。这是我发现的一个例子。

http://www.simplefadeslideshow.com/