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のGROUP BYステートメントを最適化する方法

MySQL で、id、a、b の 3 つのフィールドを持つ新しいテーブルを作成します。次のように、同...

MySQL スロークエリログの有効化と設定

導入MySQL スロー クエリ ログは、問題のある SQL ステートメントのトラブルシューティングや...

フレームセットの高さを設定する際のインターフェース変形の解決策

現在、プロジェクトを作成しました。インターフェースは次のとおりです。これはフレームセットを使用して行...

Linux環境変数の設定に関する完全なガイド

Linux環境変数の設定ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定...

CentOS で RPM を使用して MySQL 5.6 をインストールするチュートリアル

これまでのプロジェクトはすべて Windows システム環境にデプロイされていました。今回は Lin...

Linuxはlsofコマンドを使用してファイルのオープンステータスを確認します

序文Linux では「すべてがファイル」であることは誰もが知っているので、ファイルのオープン状態を確...

pdf.js を使用して Vue で PDF ファイルをプレビューする方法

ページ上で PDF をプレビューすると、一部のファイルは印刷またはダウンロードできません。現時点では...

Vue の基本リスナーの詳細な説明

目次Vueのリスナーとは何かリスナーの使い方vue リスナーウォッチVue リスナー - ディープリ...

JavaScript におけるイベント委譲メカニズムと深いコピーと浅いコピーの簡単な分析

目次1. イベントの委任イベントバブリングイベントキャプチャイベントの泡立ちの昇華考える2. 深いコ...

レスポンシブデザインについて知っておくべきこと

レスポンシブデザインとは、ウェブサイトの開発プロセス中に、ユーザーの操作やデバイス環境に応じて対応す...

HTML/CSS におけるフロートの使用例の詳細

1. floatの基本的な使用例1. まず 2 つの div ボックスを作成し、高さ、幅、背景色を設...

MySQL パーティション テーブルに関するパフォーマンス バグ

目次2. pt-pmapを使用したスタック分析3. このコラムのボトルネックポイントの分析4. パー...

CSS を使用して複数の方法で等幅レイアウトを実装するサンプルコード

この記事で説明する等幅レイアウトでは、純粋な CSS を使用して、要素の幅を手動で設定することなく、...

vue3 でブロック崩しゲームを開発する方法をステップバイステップで教えます

序文vue3 を使った例をいくつか書いてみましたが、Vue3 のコンポジション API はよく設計さ...

少なくとも7日間連続して注文を行ったユーザーに対するSQLクエリ

テーブルを作成するテーブル order(id varchar(10),date datetime,o...