5

私が現在デザインしているウェブサイトの場合、画像の配列の回転にボディの背景を設定したいと思います。私は複数の方法を試しました。つまり、fadeIn（）関数とfadeOut（）関数を使用しましたが、これらはボディ内の分割の不透明度に影響を与えるようです。また、 bgStretcherを使用してみましたが、これにより外観の問題が発生し、Webサイトが遅く途切れ途切れになりました。

できれば、画像をフェードインおよびフェードアウトさせたいと思います。助けていただければ幸いです、

これがウェブサイトへのリンク です。私が現在変更しているスクリプトファイルは、/js/ディレクトリの下のbackground.jsと呼ばれています。このファイルは実験的なものであるため、現在コメントアウトされています。現在の2つの背景画像は、「images / bg/bg1.jpg」と「images/bg/bg2.jpg」です。

これが私が動かそうとしている私の現在のコードです：

$(document).ready(function() {
    setInterval(switchImage, 5000);
    switchImage();

});

function switchImage()
{
$('body').css("background-image", "url(../images/bg/bg2.jpg)").fadeIn(1000);
$('body').css("background-image", "url(../images/bg/bg1.jpg)").fadeOut(1000);
}

背景画像間を移行する方法がわかれば、画像の配列間で変更する条件をいくつか追加するだけです。

乾杯、デーンウィルソン

4

2 に答える 2

7

このjQueryプラグインを使用すると非常に簡単です。jQueryBackstretch デモでは、「スライドショーでのBackstretchの使用」はそのコードスニペットです。

于 2012-06-02T11:56:04.100 に答える
0

これはcss3でのみ実行できます。すぐにフィドルを投稿します。

編集：キーフレームとCSS3の背景サイズを使用してアニメーションを作成しようとしましたが、どうやら彼らはあまりうまく連携したくなかったようです（ちらつき）。おそらく、jQueryを調べる方が良いでしょう。

于 2012-06-02T12:07:39.743 に答える