この記事では、JSの背景画像をランダムに切り替える方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
まず、いくつかの画像を準備する必要があります。画像のサイズ(サイズであろうとデータサイズであろうと)は、適切に制御する必要があります。大きすぎると、ユーザーが全体像を見るのを待たずに飛び出すことができなくなります。小さすぎる場合、ページの品質に影響します。
これらの画像をスクリプト内の配列にborceして、簡単に呼び出します。アレイの長さはもちろん画像の数です。
次のようにコードをコピーします:var bodybgs = []; //アレイ変数を作成して、背景画像へのパスを保存します
bodybgs [0] = "images/01.jpg";
bodybgs [1] = "images/02.jpg";
bodybgs [2] = "images/03.jpg";
bodybgs [3] = "images/04.jpg";
bodybgs [4] = "images/05.jpg";
上記で5つの画像を使用するため、ここで0〜4の乱数を生成する必要があります。配列の長さが異なる場合は、次のコードの乗数を変更するだけです。
コードコピーは次のとおりです。varrandombgindex= math.round(math.random() * 4);
これらはコアプログラムです。非常に簡単ですが、小さなアイデアです。これを基礎として使用する場合、処理を通じていくつかの拡張機能を作成できます。たとえば、トピックの切り替えやその他のランダムプレゼンテーションなど。以下は、完全なJSコードです。
次のようにコードをコピーします。<script type = "text/javascript">
// <!cdata [
var bodybgs = [];
bodybgs [0] = "images/01.jpg";
bodybgs [1] = "images/02.jpg";
bodybgs [2] = "images/03.jpg";
bodybgs [3] = "images/04.jpg";
bodybgs [4] = "images/05.jpg";
var randombgindex = math.round(math.random() * 4);
//ランダムな背景画像を出力します
document.write( '<style> body {background:url(' + bodybgs [randombgindex] + ')no-repeat 50%0} </style>');
//]]>
</script>
この記事の説明が、JavaScriptに基づいたすべての人のWebプログラミングに役立つことを願っています。