0

フェードインとフェードアウトで20秒後に背景画像を回転させています。画像の左上隅にロゴが含まれ、右上から下に人物画像が含まれています。問題は、画像をfadeInとfadeOutで回転させる必要がありますが、左上隅のロゴはfadeInとfadeOutの効果がないはずです（効果がないはずです）。変更の）。

だから私の質問は、1つの背景画像の一部だけをフェードさせ、他の部分はフェードさせてはいけない（または見えない）方法です

私の現在の作業jqueryコード

    $("DIV#background IMG").eq(0).fadeIn(1000, function(){
        setTimeout("changeBackground(0)",20000);
    });

    changeBackground = function (i){
        curr_index = i;
        //alert(curr_index);
        nex_index = ((i + 1) > 3 ) ? 0 : i + 1;
        //alert(nex_index); 
        $("DIV#background IMG").fadeOut(1000)
        $("DIV#background IMG").eq(nex_index).fadeIn(1000, function(){
            setTimeout("changeBackground(nex_index)",20000);
        });
    }

注：上記のコードは正しく、正常に機能しています

ありがとう。

4

2 に答える 2

0

jQueryプラグインjquery-rotateを追加します。次に、次を使用できます。

.rotate(angle,[whence=relative])
.rotateLeft([angle=90])
.rotateRight([angle=90])

あなたのコードでは：

$("DIV#background IMG").fadeOut(1000).rotateRight([angle=360])

さらに、コード;の2行目の終わりにaがありません。

のコンセプトがrotateBannerRotaterの場合、これがコードです。

$("DIV#background IMG").fadeOut(1000).attr('src', 'newimage.png').fadeIn(1000);

または、スライド間でいつでも変更できるように、時間を変数として持つ方がよいでしょう。

var time = 500; // Keeping it 500 because of 500 (fadeIn) + 500 (fadeOut) = 1000!
$("DIV#background IMG").fadeOut(time).attr('src', 'newimage.png').fadeIn(time);

完全なコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Banner Rotate</title>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
        <script type="text/javascript">
            function changeBG()
            {
                var d = new Date();
                $(".background img").fadeOut(500).attr('src', 'http://lorempixel.com/100/100/?' + d.getMilliseconds()).fadeIn(500);
            }
            $(document).ready(function(){
                setInterval('changeBG()', 1500);
            });
        </script>
    </head>
    <body>
        <div class="background">
            <img src="http://lorempixel.com/100/100/" alt="" />
        </div>
        <a href="#" onclick="changeBG(); return false;">Change</a>
    </body>
</html>

それが役に立てば幸い！:)

于 2012-06-08T06:11:51.657 に答える
0

画像を循環させるための jquery プラグインがあります。jQueryサイクル。すべての画像を同じコンテナ要素に入れて呼び出しますcycle()。

プラグインは 1 つの画像を他の画像の上に重ねてフェードするので、画像のロゴ部分が常に同じ場所にある場合、フェードしていることに気付かないでしょう。

もう 1 つのアイデアは、ロゴを別の (透明な .png) 画像にposition:absolute配置し、回転する画像の上の適切な位置にスタイルを設定することです。

于 2012-06-08T07:56:24.767 に答える