0
私は次の問題があります：<body>タグの異なる背景画像をタイマーでクロスフェードします。 here私が達成したいものの例を見ることができます。 問題は私がこれらのものを初めて使っているのですが、どうやってそれをするのか分かりません...私は多くの投稿を見ましたが、私はもっと混乱しました！体内のクロスフェードの背景画像
私のHTMLコード：
<body id="one" onload="startTimer()">
<!-- Some other tags -->
</body>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
var url = "url(" + images[x] + ")";
$("#one").css('background-image', url);
}
function startTimer() {
setInterval(displayNextImage, 6000);
}
var images = [], x = -1;
images[0] = "someimage1.jpg";
images[1] = "someimage2.jpg";
images[2] = "someimage3.jpg";
</script>
と私のCSSコード：
body {
background-image: url("images/forest1.jpeg");
background-size: cover;
}
これらを行うには良い方法があります場合、私は、私が意味する、提案に開いている、素晴らしいです！私はちょうど上記のウェブと同じポイントを取得したい！
ありがとうございます！
を！提供されている例のように矢印キーを必要としない場合は、JSが必要です。 – Legends
あなたのソリューションはかなり良いです、私は欲しいものを達成することができます！あなたが持っているブラウザのバージョンによってはうまくいかないかもしれませんが、それは@Teddsから独立していればいいのです。 – wj127
確かに@ wj127、アニメーションのプロパティにはブラウザのプレフィックスが必要ですが、それは大きな問題ではありません。私はプレフィックスが含まれている分でスニペットを編集しています。申し訳ありませんが、私はあなたに警告しませんでした。 – Tedds