0

現在、次のページで動作するスクリプトがあります。

http://universitycompare.com/

それはうまく機能し、私が望むことを行いますが、各トランジションの間にわずかな遅延があります。元の画像をフェードアウトしてからフェードインするのではなく、既存の画像の上に画像をフェードさせることです。 .

物事を何度も移動しようとしましたが、この修正を取得できないようです! 簡単なもので、ここにあるスクリプトがうまく機能することはわかっています。だから、これを修正するのを誰かに手伝ってもらいたいのですが、これは何日も私を悩ませてきた問題です!

とても単純なものを見逃しましたが、それを見ることができません..どんな助けでも大歓迎です。

<script type="text/javascript">
    $(document).ready(function () {

        var $backgroundimages = ['http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/ads/aru/front-page-ad.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/ads/uniofbuckingham/front-page-ad.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/ads/middlesex/front-page-ad.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-page-slide.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/TCE-New.jpg'];
        var $backgroundcount = 0;

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

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

1 に答える 1

0

.fadeIn(1000).fadeOut(1000).delay(4000) が必要だと思うので、フェードイン/アウトが同時に発生します。

さらに、両方の画像を一度に表示できるように、複数の要素が必要になります。絶対に重ねて配置された複数のタグを使用します。次に、それらを回転させて、フェードインとフェードアウトなどを行います。

cHao のコメントもエコーします。それらを事前にキャッシュし、できれば最適化する必要があります。読み込みが非常に遅いです。

更新：これは実際の例です：

http://jsfiddle.net/DhESu/

jQuery(function($){
    $('.rotator').each(function(){
        console.log('start rotation');
        imgs = $(this).find('img');
        idx = 0;
        rotate = null;
        rotate = function(){
            $(imgs[idx]).fadeOut();
            idx++;
            if (idx >= imgs.length) {
                idx = 0;
            }
            console.log('show idx ' + idx);
            $(imgs[idx]).fadeIn();
            setTimeout(rotate, 2000);
        }
        setTimeout(rotate, 2000);
    });
});

どういたしまして。

于 2013-09-13T19:50:08.573 に答える