JavaScript で円形カルーセルを実装する

JavaScript で円形カルーセルを実装する

この記事では、円形カルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

ケースデモンストレーション:

1. 下のアイコンをクリックして写真を回転します
2. 画像が回転したら、最初の画像に回転します(コード内の詳細な説明)

プロジェクト構造図:

HTMLコード:

<!DOCTYPE html>
<html>
<ヘッド>
 <メタ文字セット="utf-8" />
 <title>画像カルーセルの例</title>
 <link rel="スタイルシート" href="css/lunbo.css" />
 <script src="js/tools.js"></script>
 <script src="js/lunbo.js"></script>
</head>
<本文>
 <!-- 外部コンテナー -->
 <div id="外側">
  <!-- 画像リスト-->
  <ul id="画像リスト">
   <li><img src="img/1.jpg" /></li>
   <li><img src="img/2.jpg" /></li>
   <li><img src="img/3.jpg" /></li>
   <li><img src="img/4.jpg" /></li>
   <li><img src="img/5.jpg" /></li>
   <!-- 次のサイクルを容易にするために、最初の画像の表示を繰り返します。 -->
   <li><img src="img/1.jpg" /></li>
  </ul>
  <!-- ナビゲーション ボタン -->
  <div id="nav-btns">
   <a href="javascript:;" ></a>
   <a href="javascript:;" ></a>
   <a href="javascript:;" ></a>
   <a href="javascript:;" ></a>
   <a href="javascript:;" ></a>
  </div>
 </div>
</本文>
</html>

CSSコード:

* {
 マージン: 0;
 パディング: 0;
}

/*
 * 外側のスタイルを設定する */
#外側{
 /*幅と高さを設定する*/
 幅: 520ピクセル;
 高さ: 333px;
 /*中心*/
 マージン: 50px 自動;
 /*背景色を設定する*/
 背景色: オレンジ;
 /*パディングを設定する*/
 パディング: 10px 0;
 /*相対的な位置指定を有効にする*/
 位置: 相対的;
 /*はみ出したコンテンツをトリミング*/
 オーバーフロー: 非表示;
}

/*画像リストを設定する*/
#画像リスト{
 /*箇条書きを削除*/
 リストスタイル: なし;
 /*ulの幅を設定する*/
 /*幅: 2600px;*/
 /*絶対位置指定を有効にする*/
 位置: 絶対;
 /*オフセットを設定します(左に520ピクセルごとに次の画像が表示されます)*/
 左: 0px;
}

/*画像にliを設定します*/
#画像リスト li {
 /* 浮動小数点数を設定する */
 フロート: 左;
 /*左と右の余白を設定する*/
 マージン: 0 10px;
}

/*ナビゲーションボタンを設定する*/
#ナビゲーションボタン{
 /*絶対位置指定を有効にする*/
 位置: 絶対;
 /*位置を設定*/
 下: 15px;
}

#nav-btns {
 /*ハイパーリンクをフローティングに設定*/
 フロート: 左;
 /*ハイパーリンクの幅と高さを設定します*/
 幅: 15px;
 高さ: 15px;
 /*背景色を設定する*/
 背景色: 赤;
 /*左と右の余白を設定する*/
 マージン: 0 5px;
 /*透明度を設定する*/
 不透明度: 0.5;
 /*IE8 透過対応*/
 フィルター: アルファ(不透明度=50);
}

/*マウス入力効果を設定する*/
#nav-btns a:hover {
 背景色: 黒;
}

lunbo.js コード

window.onload = 関数() {
 // 画像リストを取得します var imgList = document.getElementById("img-list");
 // ページ内のすべての img タグを取得します var imgArr = document.getElementsByTagName("img");
 // imgList の幅を設定します。imgList.style.width = 520 * imgArr.length + "px";

 // ナビゲーション ボタンを中央に設定します // ナビゲーション ボタンを取得します var navBtns = document.getElementById("nav-btns");
 // 外側を取得
 var 外側 = document.getElementById("外側");
 // navBtns の左の値を設定します。navBtns.style.left = (outer.offsetWidth - navBtns.offsetWidth) / 2 + "px";

 // デフォルトの表示画像インデックス var index = 0;
 // すべて取得
 var allA = document.getElementsByTagName("a");
 // デフォルトの選択された効果を設定します allA[index].style.backgroundColor = "black";

 /*
  * ハイパーリンクをクリックすると、指定された画像に切り替わります * 最初のハイパーリンクをクリックすると、最初の画像が表示されます * 2 番目のハイパーリンクをクリックすると、2 番目の画像が表示されます * */

 // クリック応答関数をすべてのハイパーリンクにバインドします for (var i = 0; i < allA.length; i++) {
  // 各ハイパーリンクにnum属性を追加します。allA[i].num = i;

  // クリック応答関数をハイパーリンクにバインドする allA[i].onclick = function() {
   // 自動切り替えタイマーをオフにする clearInterval(timer);
   
   // クリックされたハイパーリンクのインデックスを取得し、それをインデックスに設定する
   インデックス = this.num;

   // 選択したaを設定する
   setA();

   // 移動関数を使用して画像を切り替える move(imgList, "left", -520 * index, 20, function() {
    // アニメーションが実行された後、自動切り替えをオンにします。autoChange();
   });
  };
 }

 // 自動画像切り替えをオンにする autoChange();

 // 選択したaを設定する
 関数setA() {
  // 現在のインデックスが最後の画像かどうかを判定します。if (index >= imgArr.length - 1) {
   // インデックスを0に設定する
   インデックス = 0;

   // この時点で最後の画像が表示され、最後の画像は最初の画像とまったく同じです // CSS を使用して最後の画像を最初の画像に切り替えます imgList.style.left = 0;
  }

  // すべてのaを走査し、背景色を赤に設定します for (var i = 0; i < allA.length; i++) {
   allA[i].style.backgroundColor = "";
  }

  // 選択したaを黒に設定します allA[index].style.backgroundColor = "black";
 };

 // 自動切り替えタイマー識別子を定義します。var timer;
 // 自動画像切り替えを有効にする関数を作成する function autoChange() {
  // 一定の間隔で画像を切り替えるタイマーを開始します timer = setInterval(function() {
   //インデックスを増分します index++;

   // インデックスの値を決定します。index %= imgArr.length;

   // アニメーションを実行し、画像を切り替えます move(imgList, "left", -520 * index, 20, function() {
    // ナビゲーション ボタンを変更します setA();
   });
  }, 3000);
 }

};

tool.js コード:

/*
 * 簡単なアニメーションを実行できる関数を作成します * パラメータ:
 * obj: アニメーション化するオブジェクト * attr: アニメーション化するスタイル、例: 左上 幅 高さ
 * target: アニメーションのターゲット位置 * speed: 移動速度(正の数は右に移動し、負の数は左に移動します)
 * コールバック: コールバック関数。この関数はアニメーションが完了した後に実行されます*/
関数move(obj, attr, target, speed, callback) {
 // 前のタイマーを閉じます clearInterval(obj.timer);

 // 要素の現在の位置を取得します。var current = parseInt(getStyle(obj, attr));

 // 速度の正負の値を判定する // 0から800まで動く場合は速度は正 // 800から0まで動く場合は速度は負 if (current > target) {
  //この時点で速度は負の値になるはずです speed = -speed;
 }

 // アニメーション効果を実行するためにタイマーを開始します // アニメーションを実行するオブジェクトにタイマープロパティを追加して、独自のタイマー識別子を保存します obj.timer = setInterval(function() {
  // box1 の元の左の値を取得します。var oldValue = parseInt(getStyle(obj, attr));

  // 古い値を増やす var newValue = oldValue + speed;

  // newValue が 800 より大きいかどうかを判定します
  // 800 から 0 へ移動 // 左に移動する場合、newValue が target より小さいかどうかを判断する必要があります
  // 右に移動するときに、newValue が target より大きいかどうかを判断する必要があります
  if ((速度 < 0 && 新しい値 < ターゲット) || (速度 > 0 && 新しい値 > ターゲット)) {
   新しい値 = ターゲット;
  }

  // 新しい値をbox1に設定する
  obj.style[attr] = newValue + "px";

  // 要素が0pxに移動したらアニメーションを停止します if (newValue == target) {
   // ゴールに到達したらタイマーをオフにします clearInterval(obj.timer);
   // アニメーションが実行された後、コールバック関数を呼び出します callback && callback();
  }

 }, 30);
}

/*
 * 指定された要素の現在のスタイルを取得する関数を定義します * パラメータ:
 * obj スタイルを取得する要素 * name 取得するスタイルの名前 */
関数 getStyle(obj, name) {
 if (window.getComputedStyle) {
  // 通常のブラウザメソッド、getComputedStyle() メソッドを使用 return getComputedStyle(obj, null)[name];
 } それ以外 {
  // IE8 メソッド、getComputedStyle() メソッドなし return obj.currentStyle[name];
 }
}

/*
 * 指定されたクラス属性値を要素に追加する関数を定義します * パラメータ:
 * obj クラス属性を追加する要素* cn 追加するクラス値*/
関数addClass(obj, cn) {
 // obj に cn が含まれているかどうかを確認します
 (!hasClass(obj、cn))の場合{
  obj.className += " " + cn;
 }
}

/*
 * 要素に指定されたクラス属性値が含まれているかどうかを判断します。
 * クラスが存在する場合は true を返し、存在しない場合は false を返します。
 */
関数hasClass(obj, cn) {
 // obj に cn クラスがあるかどうかを判定します
 // 正規表現を作成する var reg = new RegExp("\\b" + cn + "\\b");
 reg.test(obj.className) を返します。
}

/*
 * 要素から指定されたクラス属性を削除します */
関数removeClass(obj, cn) {
 // 正規表現を作成する var reg = new RegExp("\\b" + cn + "\\b");
 // クラスを削除する
 obj.className = obj.className.replace(reg, "");
}

/*
 * トグルクラスはクラスを切り替えるために使用できます * 要素にクラスがある場合はそれを削除します * 要素にクラスがない場合はそれを追加します */
関数toggleClass(obj, cn) {
 //objにcnが含まれているかどうかを判定する
 (クラスがある場合(obj、cn)){
  //はいの場合は削除します。removeClass(obj, cn);
 } それ以外 {
  //そうでない場合は、addClass(obj, cn); を追加します。
 }
}

画像リソースは以下にあります:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript ループトラバーサルの 24 種類のメソッドをすべてご存知ですか?
  • JavaScriptのループの違いについての詳細な説明
  • JavaScript イベント ループのケース スタディ
  • JavaScript における 3 つの for ループ ステートメントの使用の概要 (for、for...in、for...of)
  • jsのイベントループ機構の解析
  • JS の配列トラバーサルについて、一般的なループをいくつ知っていますか?
  • 意外と知らないJSのループ速度テストのいろいろを徹底解説
  • JavaScript の例におけるループの使用法の詳細な説明

<<:  CentOS 7.3 で Nginx 仮想ホストを設定する方法

>>:  MySQL の起動時に InnoDB エンジンが無効になる問題の解決方法

推薦する

MySQLデータベースインデックスの詳細な説明

目次1. MySQLインデックスの紹介2. MySQLの5種類のインデックスの詳しい説明1. 総合索...

一般的なフロントエンドJavaScriptメソッドのカプセル化

目次1. 値を入力し、そのデータ型を返す** 2. アレイ重複排除3. 文字列の重複排除4. ディー...

MySQL 操作: JSON データ型の操作

前回の記事では、MySQL データ保存手順パラメータの詳細な例を紹介しました。今日は、JSON デー...

WeChatアプレットは左にスワイプしてリスト項目を削除する効果を実現

この記事では、WeChatミニプログラムの具体的なコードを共有し、左にスワイプしてリスト項目を削除す...

Vue 値転送の 12 の方法の概要

目次1. 父から息子へ2. 息子から父へ3. ブラザーコンポーネント通信(バス) 4. ref/re...

Link と @import の違いを詳しく見る

ページで CSS を使用する主な方法は、スタイル属性値をインラインで追加する方法、ページ ヘッダーで...

Nginx は https ウェブサイト構成コード例を実装します

https ベースポート 443。これはキーと呼ばれるものに使用されます。これらのことを理解せずにで...

Linux で最も頻繁に使用されるターミナル コマンドのトップ 10 のリストを取得します。

私が最も頻繁に使用するコマンドは次の通りです:選択肢CDギットls ssh須藤数週間前、私はこの R...

MySQL で指定エンコーディングを実装する際の落とし穴について

前面に書かれた環境: MySQL 5.7+、MySQL データベースの文字エンコードは utf8、テ...

nginx をシャットダウン/再起動/起動する方法

閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...

初心者向けのMySQLデータベースとテーブルDDLの作成と操作の学習

目次1. データベースを操作する1.1 データベースを作成する1.2 データベースをクエリする1.3...

MySQL 8.0 の統計が不正確である理由

序文Oracle であれ MySQL であれ、新バージョンで導入された新機能は、一方では製品の機能性...

HTML テーブルの境界線を設定する際のヒント

HTML を初めて使用する多くの人にとって、テーブル <table> は最もよく使用され...

Linux での wget コマンドの基本的な使い方

目次序文1. wgetを使用して単一のファイルをダウンロードする2. wget -Oを使用してダウン...

「MySQL サービスを開始できません エラー 1069」を解決する方法

今日、外出中に同僚から、ウェブサイトのバックエンドにアクセスできないというメッセージが届きました。と...