JavaScriptで画像を回転する方法

JavaScript は、Web ページにコンテンツを動的に表示できる人気のあるプログラミング言語です。 Web デザインでは、画像の回転はページのインタラクティブ性と魅力を高める重要な部分です。ここでは、JavaScript を使用して画像の回転効果を実現する方法を紹介します。

1. HTML と CSS の準備

HTML ファイルでは、まずイメージ コンテナを定義し、ul タグ構造と li タグ構造を使用してコードを記述する必要があります。 ul タグはイメージ コンテナを表し、li タグはイメージを表します。以下に示すように:

<div id="slider">
  <ul>
    <li><img src="path/to/image1.jpg"></li>
    <li><img src="path/to/image2.jpg"></li>
    <li><img src="path/to/image3.jpg"></li>
  </ul>
</div>

CSS ファイルでは、幅、高さ、位置、その他の属性を含む画像コンテナーと画像のスタイルを設定し、overflow:hidden 属性を使用してコンテンツを非表示にする必要があります。コンテナの外側に配置し、範囲内の指定部分のみを表示します。以下に示すように:

#slider {
   width: 600px;
   height: 400px;
   position: relative;
   overflow: hidden;
 }
 
 #slider ul {
   position: absolute;
   list-style: none;
   margin: 0;
   padding: 0;
   width: 300%;
 }
 
 #slider ul li {
   float: left;
   width: 33.33%;
   height: 400px;
 }

 #slider ul li img {
   width: 100%;
   height: 100%;
   display: block;
 }

2. JavaScript の実装

JavaScript では、画像の回転効果を実現するために画像コンテナを操作する必要があります。タイマーを定義して、時間の経過とともに画像をアニメーション化できます。コードは次のとおりです。

var slider = document.getElementById("slider");
var ul = slider.children[0];
var liWidth = slider.offsetWidth / 3;
var currentIndex = 0;
var timer;

function autoPlay() {
  timer = setInterval(function() {
    currentIndex++;
    if (currentIndex >= 3) {
      currentIndex = 0;
    }
    ul.style.left = -currentIndex * liWidth + "px";
  }, 3000);
}
autoPlay();

コードでは、まず、コンテナ内の画像と ul 要素を含むコンテナ スライダーを取得します。コンテナの幅を li の数で割ることにより、各イメージの幅を計算できます。次に、回転ステータスを追跡するために、現在の画像インデックスを保持する変数 currentIndex を定義します。最後に、setInterval 関数を使用して 3 秒ごとに実行するタイマーを定義し、currentIndex 値と ul の左マージンを変更して画像を自動的に回転します。また、回転を停止する必要がある場合は、clearInterval 関数を使用してタイマーを停止します。

3. 画像インジケーターを追加する

画像回転効果にインジケーターを追加する場合は、HTML コードにインジケーター コンテナーを追加し、JavaScript を使用してインジケーターを動的に作成できます。コードは次のとおりです。

<div id="slider">
  <ul>
    <li><img src="path/to/image1.jpg"></li>
    <li><img src="path/to/image2.jpg"></li>
    <li><img src="path/to/image3.jpg"></li>
  </ul>
  <div id="indicator"></div>
</div>

var indicator = document.getElementById("indicator");

for (var i = 0; i < 3; i++) {
  var div = document.createElement("div");
  div.className = "dot";
  div.setAttribute("index", i);
  div.onclick = function() {
    currentIndex = parseInt(this.getAttribute("index"));
    ul.style.left = -currentIndex * liWidth + "px";
    setActive();
  };
  indicator.appendChild(div);
}

function setActive() {
  var dots = document.getElementsByClassName("dot");
  for (var i = 0; i < dots.length; i++) {
    if (currentIndex == i) {
      dots[i].className = "dot active";
    } else {
      dots[i].className = "dot";
    }
  }
}
setActive();

最初にインジケーター コンテナー インジケーターを取得し、次にループ ステートメントを使用して、各ピクチャのインジケーター ポイントを表すインデックス属性を持つ複数の div 要素を動的に作成します。次に、各インジケーター ポイントに onclick イベントを追加します。インジケーター ポイントがクリックされると、現在のイメージ インデックス currentIndex が変更され、ul の左マージンが left に設定され、インジケーター ポイントがアクティブ状態に設定されます。 setActive 関数では、すべてのインジケーター ポイントをループし、現在選択されているインジケーター ポイントにアクティブなクラス名を追加し、選択されていないインジケーター ポイントと区別できるようにその背景色を濃くします。

4. 概要

この記事では、HTML、CSS、JavaScript を使用して画像の回転効果を実現する方法と、ユーザー エクスペリエンスを向上させるインジケーターを追加する方法を紹介します。 JavaScript プログラミングを深く学習することに興味がある場合は、スキルと実践的なプロジェクト開発経験を向上させるために、より類似した Web アニメーション、インタラクション デザイン、特殊効果を練習することをお勧めします。

以上がJavaScriptで画像を回転する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。