0

各画像パスをハードコーディングすることなく背景画像を変更して、単純なスライドショーを実行しようとしています。すべての画像に末尾に番号を付けて「slideShow」という名前を付けました(slideShow1.png/slideShow2.png)。これは私のコードですが、元の背景画像をフェードアウトするだけで、新しい画像に置き換えていません。助けてくださいありがとう。

var imgArr = new Array();
for(var i=0; i < 5; i++){
var count = i+1;
imgArr[i] = new Image();
imgArr[i].src = "http://localhost/website/css/images/slideShow" + count + ".png";
}

 function changeImg(){
 for(var i=0; i < imgArr.length; i++){
 $('#slideshow').animate({opacity: 0}, 1000, function(){
 $(this).css('background',"url('" + imgArr[i].src +"') no-repeat scroll 0 0 transparent")
 }).animate({opacity: 1}, 1000);
}
};
var startRolling = setInterval(changeImg, 3000);
4

1 に答える 1

1

コードへの多くの変更:

new Array() を実行しないでください。var x = []; を使用するだけです。どちらの場合でも、ここでは必要ありません。

背景画像を設定するために画像オブジェクトを作成する必要はありません。画像をプリロードしたい場合はできますが、これはあなたのケースでは複雑すぎるかもしれません.

変更されたコード:

(function(){
    var count = 0,
    slideshow = $('#slideshow'),

    startRolling = setInterval(function(){

        count > 5?
            count = 0:
            count++;

        slideshow.css('background-image', 'url(http://localhost/website/css/images/slideShow' + count + '.png');

    }, 3000);
})();

この例では、フェードイン/フェードアウト アニメーションを追加していないことに注意してください。その部分を理解するために、OPへの演習として残します。

また、変更が必要な css プロパティのみを変更する必要があることに注意してください。したがって、「no-repeat scroll 0 0 transparent」の追加定義は、スタイル オブジェクトを介して直接ではなく、スタイルシートで設定する必要があります。あらゆる種類の DOM 操作の秘訣は、できる限り少ない操作を行うことです。

于 2012-08-16T21:48:08.550 に答える