JavaScriptで画像を回転する方法-フロントエンドQ&A-php.cn

JavaScriptで画像を回転する方法

王林

リリース： 2023-05-09 10:11:07

オリジナル

1359 人が閲覧しました

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 サイトの他の関連記事を参照してください。