JavaScriptを使用して画像切り替えを実装する-フロントエンドQ&A-php.cn

JavaScriptを使用して画像切り替えを実装する

WBOY

リリース： 2023-05-27 10:55:38

オリジナル

2192 人が閲覧しました

インターネットアプリケーションの発展に伴い、Web サイトの美しさとインタラクティブ性が訪問者を引き付ける重要な要素になりました。 Webデザインにおいて、画像の使用は欠かせません。ページに画像トランジション効果を設定することは、ユーザーの注意を引く優れた方法です。この記事では、JavaScript を使用して簡単な画像切り替えエフェクトを実装します。

まず、HTML ファイルを作成する必要があります。ファイルの先頭に、CSS スタイルと JavaScript スクリプトへの参照を追加できます。 body タグ内に、画像をラップする div 要素を作成します。以下に示すように:

<!DOCTYPE HTML>
<html>
<head>
  <title>图片切换</title>
  <style type="text/css">
    #img {
      width: 600px;
      height: 400px;
      margin: 0 auto;
      position: relative;
    }
    #img img {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }
    #img img.active {
      opacity: 1;
    }
  </style>
  <script src="img_switch.js"></script>
</head>
<body>
  <div id="img">
    <img src="image1.jpg" class="active" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
    <img src="image4.jpg" />
  </div>
</body>
</html>

ログイン後にコピー

CSS スタイルでは、#img div 要素の幅と高さを設定し、画像の位置を相対位置として定義しました。また、各画像を重ね合わせられるように、各画像の位置を絶対位置に設定します。

ここでは、不透明度属性を使用して画像の透明度を設定します。アクティブなクラスは、現在表示されている画像を表します。次の画像に切り替えるときは、現在表示されている画像の不透明度の値を 0 に設定し、次の画像の不透明度の値を 1 に設定します。これにより、フェードとエマージングのエフェクトが作成されます。

次に、JavaScript スクリプトファイル img_switch.js を作成します。コードは次のとおりです。

var i = 0; // 初始化计数器
var images = document.querySelectorAll("#img img"); // 获取所有的图片元素
var len = images.length; // 获取图片的总数

function switchImg() {
  // 隐藏当前展示的图片
  images[i].classList.remove("active");
  // 获取下一个图片的索引位置
  i = (i + 1) % len;
  // 显示下一张图片
  images[i].classList.add("active");
}

// 每隔5秒切换一次图片
setInterval(switchImg, 5000);

ログイン後にコピー

この JavaScript スクリプトでは、最初にカウンタ変数 i を定義し、次にすべてのピクチャ要素を取得して変数 image に格納します。また、写真の総数を保存する変数 len も定義します。

switchImg 関数では、まず現在表示されているピクチャのアクティブクラスを削除し、次に次のピクチャのインデックス位置を計算し、次のピクチャを表示するアクティブクラスを追加します。 setInterval関数を利用して定期的にswitchImg関数を呼び出し、画像を自動で切り替える機能を実現しています。

最後に、HTML ファイル内の JavaScript スクリプトを参照して、自動切り替え効果をトリガーします。

JavaScriptを使用して画像を切り替える方法です。必要に応じてスタイルとスクリプトをカスタマイズして、よりクールな効果を実現できます。

以上がJavaScriptを使用して画像切り替えを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。