Webページの背景画像をランダムに切り替えるjsメソッド_javascriptスキル

この記事の例では、js を使用して Web ページの背景画像のランダムな切り替えを実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

まず、いくつかの画像を用意します。画像のサイズ (サイズまたはデータサイズ) を適切に制御する必要があります。大きすぎると、ユーザーは画像全体を表示するのを待つことができなくなります。小さすぎるとページの品質に影響します。

呼び出しを容易にするために、これらの画像をスクリプト内の配列に整理します。配列の長さはもちろん画像の数です。

コードをコピーします コードは次のとおりです。

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までの乱数を生成する必要があります。配列の長さが異なる場合は、以下のコードの乗数を変更するだけです。

コードをコピーします コードは次のとおりです。

var randomBgIndex = Math.round( Math.random() * 4 ) ;

これらはコアプログラムです。非常に単純ですが、これをベースにすればいくつかの拡張機能を加工で作ることができます。例: テーマの切り替えやその他のランダムなプレゼンテーションなど。以下は完全な JS コードです。

コードをコピー コードは次のとおりです。

この記事が皆さんの JavaScript ベースの Web プログラミングに役立つことを願っています。