2

ここで見つけたものはすべて、必要以上に複雑なものを提案しているようです。

私は基本的に、これを changeBackground で fadeIn("slow") にしたいだけです...
簡単に実装するための提案はありますか?

jQuery( function( $ ) {
    var images = [ "bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg" ];
    var currentImage = 0;

    function changeBackground() {
        $( '#home' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );
        if ( currentImage >= images.length - 1 ) {
            currentImage -= images.length;
        }
    }

    setInterval( changeBackground, 2600 );  
});
4

2 に答える 2

1

簡略化されたバージョン（ラッパー、スライド）とラッパー、スライド、スライドの方法は次のとおりです。

コード：

<script>
var images = [ "bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg" ];
var cur_image = 0;

function changeBackground() {

    cur_image++;

    if ( cur_image >= images.length )
        cur_image = 0;

    // change images
    $( '#container' ).css({
        backgroundImage: 'url(' + images[ cur_image ] + ')'
    });

    $( '#container .slide' ).fadeOut( 'slow', function(){
        $( this ).css({
            backgroundImage: 'url(' + images[ cur_image ] + ')'
        }).show();
    } );

}

setInterval( changeBackground, 2600 );
</script>

マークアップの例は次のとおりです。

<div id="container">
    <div class="slide"></div>
    <div class="content">
        <p>This is example content.</p>
        <p>This is more content.</p>
    </div>
</div>
<style type="text/css">
#container { height: 768px; width: 1024px; background: url(bg2.jpg); }
#container .slide { height: 768px; width: 1024px; position: absolute; }
#container .content { position: absolute; top: 40px; left: 40px; padding: 1em; background: rgba(255,255,255,.5); }
</style>
于 2013-02-15T06:55:06.377 に答える
0

jQuery でこれを行う別の方法がありますが、それでも簡単に実装できます。このフィドルを見てください: http://jsfiddle.net/WRMfU/

アイデアは、次のように 2 つの div を内部に含む画像プレーヤーを配置することです。

<div id="player">
    <div id="player-top"></div>
    <div id="player-bottom" class="img00"></div>
</div>

jQueryではトップの divplayer-topに画像を配置して非表示に設定し、fadeInアニメーションを行い、アニメーションが終わったらトップの画像をボトムの divplayer-bottomに配置するので、次に配置するときの準備が整います上部に新しい画像を表示し、同じタスクを再度実行します。

var nImages = 3, currImage = 0;

function changePic(){
    var top = $("#player-top");
    currImage == nImages ? currImage = 0 : currImage++;
    top.hide().addClass("img0"+currImage).fadeIn(800, function(){
        $("#player-bottom").attr("class", top.attr("class"));
        top.attr("class", "");
    });
}

setInterval(changePic, 2000);

私はCSSを使用して背景画像を保持するクラスを作成しているので、JavaScriptで処理する方が簡単です...

#player > div.img00 { background-image: url("http://dummyimage.com/400x300/440/ffffff&text=Image+01"); }
#player > div.img01 { background-image: url("http://dummyimage.com/400x300/404/ffffff&text=Image+02"); }
...
于 2013-02-15T04:57:57.990 に答える