0

我试图在 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>

这是骇人听闻的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'));

任何帮助将不胜感激，我是整个编程的新手:)

谢谢！

4

1 回答 1

0

而不是重新发明轮子，您可能想看看那里的许多 jquery 滑块之一。或者，您可以查看已经充实了此类内容的 JS 和 CSS 框架。这是我找到的一个例子。

http://www.simplefadeslideshow.com/

于 2013-08-12T02:46:57.393 回答