Question

我试图在UrbanAirship.com上实现类似的效果，同时提供更长的淡入淡出过渡。我使用多个UL实现了单向淡入淡出，在它们下方隐藏了LI，并使用了淡入淡出效果。我用Cycle2 JQUERY插件实现了这一点，但我也使用一些自定义的InOut代码实现了它。我已经能够获得一个数据速度属性，我已经分配给LI来尝试让淡入淡出回到主要的LI，但是在一个循环之后它们变得棘手。

这是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>

这是hackedy 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/

以一个顺序循环通过LI，然后返回另一个顺序 - 同时淡出

1 个答案: