0

より長いフェード遷移を提供しながら、UrbanAirship.com で同様の効果を達成しようとしています。複数の UL を使用し、その下に隠された LI を使用し、フェード効果を使用して、一方向のフェードを実現しました。Cycle2 JQUERY プラグインでこれを達成しましたが、カスタム InOut コードを使用して達成しました。LI に割り当てたデータ速度属性を取得して、フェードをメインの LI に戻そうとしましたが、1 回のループの後、おかしくなりました。

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 スライダーの 1 つを見てみたいと思うかもしれません。別の方法として、この種のものがすでに肉付けされている JS および CSS フレームワークを調べることもできます。これが私が見つけた一例です。

http://www.simplefadeslideshow.com/

于 2013-08-12T02:46:57.393 に答える