0

私は jQuery の初心者ですが、お互いにフェード インおよびフェード アウトする 4 つの div を考え出すことができました。これで問題ありませんが、現在の 4 つの div を 1 つの div だけに置き換え、4 つの div をフェードする代わりに、その div の異なる背景画像をフェード インしたいと考えています。

そのため、4 つの個別の div をフェードするのではなく、1 つの div で 4 つの背景画像をフェードします。

私が今持っている現在のコード：

jQuery:

<script type="text/javascript">
$(document).ready(function() {
    function fade($ele) {
        $ele.fadeIn(1000).delay(4000).fadeOut(1000, function() {
            var $next = $(this).next('.HomeImage');
            fade($next.length > 0 ? $next : $(this).parent().children().first());
       });
    };  

    fade($('div#stretchParent > .HomeImage').first());
}); 
</script>

HTML:

<div id="stretchParent"><!-- Stretch -->
    <div class="HomeImage"></div>
    <div class="HomeImage"></div>
    <div class="HomeImage"></div>
    <div class="HomeImage"></div>
</div><!-- End of Stretch -->

したがって、4 つのフェード div で使用したい HTML は次のとおりです。

<div id="stretchParent"><!-- Stretch -->
    <div class="HomeImage"></div>
</div><!-- End of Stretch -->

私は完全に困惑しており、jQueryを書いたのは私と友人でした。

あらゆる指示、リンク、またはヘルプに事前に感謝します。

4

1 に答える 1

2

OK、これを試してみてください http://jsfiddle.net/davidja/Wzcgn/11/

$(document).ready(function () {

    var $backgroundimages = ['blue', 'red', 'grey', 'black'];
    var $backgroundcount = 0;

    function fade($ele) {
        $ele.css('background-color', $backgroundimages[$backgroundcount]);
        $backgroundcount++;
        $ele.fadeIn(1000).delay(4000).fadeOut(1000, function () {
            if ($backgroundcount >= $backgroundimages.length) {
                $backgroundcount = 0;
            };
            fade($ele);
        });
    };

    fade($('#stretchParent  .HomeImage').first());
});

代わりに画像を使用するには、以下のようなものです (未テスト)。

var $backgroundimages = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg'];

$ele.css('background-image', 'url('+$backgroundimages[$backgroundcount]+')');
于 2013-06-27T12:03:57.660 に答える