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); を追加します。
 }
}

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