0

まず、こんにちは。私はかなり長い間何かを達成しようとしてきました。jqueryを使用して背景のフルスクリーンスライドショーを作成しようとしています。私はcssアニメーションを使用してそれを達成しましたが、新しいタブを選択してからcssアニメーションのタブに戻ると、地獄のように遅れ始めます。jqueryを使用している場合、これは発生しないと思います。また、すでに構築されているjqueryスライドショープラグインを使用せずに、できるだけシンプルに作成しようとしましたが、できませんでした。

そして今、私はアイデアを得ました。私のサイトの背景には、私は通常使用します

<div id="background">
    <img src="background.jpg" class="stretch" alt="" />
</div>

次のCSSを使用します。

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

それで、img srcの値を自動的に変更し、可能であればそれにアニメーションを追加することは可能ですか？

4

1 に答える 1

2 
var urlArray = [
 'url1','url2','url3'
];
var slideShowTimings = 1000;
var i=0
setInterval(function(){
var $img = $($('.stretch')[0]);
$img.attr('.src',urlArray[++i%urlArray.length]);
},slideShowTimings);

これを試してください..これにより、1秒（1000ms）ごとに背景画像が変更されます。
アニメーション化する場合は、$。animate（）または$ .show（）と$ .hide（）。somethignを使用する必要があります。

var urlArray = [
 'url1','url2','url3'
];
var slideShowTimings = 2000;
var i=0
setInterval(function(){
var $img = $($('.stretch')[0]);
$img.hide(slow,function(){
 $img.attr('.src',urlArray[++i%urlArray.length]);
 $img.show(fast)
});
},slideShowTimings);
于 2012-09-03T11:23:36.313 に答える