2

特定の関数セットを書くのに問題があります。レスポンシブ サイトのビジュアル スポンサー バーに取り組んでいます。5 つの div に分割された約 20 個のスポンサー ロゴがあり、ランダムに循環させる必要があります。各 div に画像が 2 つしかない場合、私が始めたコードはシームレスに機能します。

画像はランダムにフェードインおよびフェードアウトします。ただし、フリップフロップ効果以上の機能が必要です。つまり、div ごとにローテーター画像の配列を作成し、ランダムに 1 つを選択する関数を記述し、その配列内の表示されている画像をオフにしてから、選択した画像をフェードインする必要があります。

私はこれを何度も繰り返し、画像がリスト形式でレイアウトされている場合に機能するコードを見つけましたが、ブラウザウィンドウのサイズに応答するときに画像をフロートしてラップする必要があります. どんな助け（および説明）も大歓迎です。

ありがとうございました！

フィドル全体へのリンクは以下にありますが、最初の (5 つの) div は次のようになります。

  <div class="rotator">
    <img src="http://www.fourtownfair.com/images/sponsors/agway.png" class="rotator-image" />
    <img src="http://www.fourtownfair.com/images/sponsors/robertrookey.png" class="rotator-image"/>
    <img src="http://www.fourtownfair.com/images/sponsors/fairviewfarms.png" class="rotator-image" />
    <img src="http://www.fourtownfair.com/images/sponsors/redrobin.png" class="rotator-image" />
</div>

<div class="rotator">
    <img src="http://www.fourtownfair.com/images/sponsors/equestriancollection.png" class="rotator-image" />
    <img src="http://www.fourtownfair.com/images/sponsors/salmonbrook.png" class="rotator-image" />
    <img src="http://www.fourtownfair.com/images/sponsors/smyth.png" class="rotator-image" />
    <img src="http://www.fourtownfair.com/images/sponsors/conlinfarm.png" class="rotator-image" />
</div>

Javascript:

$(function() {

    //Timeout are called once and only once, you need to use Interval to repeat the call :-)  
    $(document).ready( function() { 
        //Interval with millisecond delay, 2000 = every 2 seconds, always divide by 1000 to get the time.
        setInterval(function(){rotateImages();}, 2000); 
    });

    //Breaking this function out, to make the interval statement more readable
    var rotateImages = function() {

        //Another thing I do to enhance readability, break the collection into a variable
        var rotatorArray = $(".rotator");

        //We've got the array of rotator blocks, select a random one by length (out of 5 in this case)
        var rand = Math.floor(Math.random() * rotatorArray.length);

        //If the topmost randomly selected image is hidden, fade in, if it's visible, fade out
        if($(rotatorArray[rand].children[0]).css('display') == "none")
        {
            $(rotatorArray[rand]).children(".rotator-image").fadeIn();
        }
        else
        {
            $(rotatorArray[rand]).children(".rotator-image").fadeOut();
        }
    };
});

ここでフィドル： http://jsfiddle.net/amandabeau/8Y7NM/5/

4

2 に答える 2

0

あなたはこれを考えすぎたと思います（私が正しく理解していれば）、これを行うことはできません：http://jsfiddle.net/3tEJA/

function animate() {
    var max = $(".rotator img").length;
    $(".rotator img").eq(Math.floor(Math.random()*max)).fadeIn(1000).delay(2000).fadeOut(1000,function() {
    animate();
  });
}
animate();
于 2013-08-27T15:46:44.463 に答える
0 
function changeImages() {
    $('.rotator').each(function() {
        var currentImages = $(this).find('img')
        var number = Math.round(Math.random() * currentImages.length());
        currentImages.addClass('hidden');
        currentImages.eq(number).removeClass('hidden');
    });
}

次に、css3 transition を使用してトランジション効果を取得できます。次に例を示します。

.rotator img {
    opacity: 1
    transition: opacity 500ms ease;
}

.rotator img.hidden {
    opacity: 0
}

これは、ページ上ですべての画像をロードすることを意味しますが、1 つには「隠し」クラスが適用されています。

私はそれをテストしていませんが、うまくいくはずだと確信しています。animate メソッドの代わりに css3 transition を使用することをお勧めします。古いブラウザでは、画像が変化するのを確認できますが、フェード機能が失われるだけです

于 2013-08-27T15:47:19.193 に答える