JavaScript ベースのシンプルなカルーセルの実装

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

js カルーセル実装のアイデア

1. まず要素ボックスの左と右のボタンを取得します
2. マウスが通過したときに左ボタンと右ボタンを表示/非表示にする
3. 小さな円を動的に生成し、カスタム属性を追加する
4. 小さな円のクリックイベントに現在のクラス名を追加します。
5. アニメーションイベント animate equals - インデックス番号 * focusWidth を追加します。
6. 最初の画像を最後まで複製する
7. 右/左ボタンクリックイベントを追加する
8. 右ボタンクリックイベントを手動で呼び出すタイマーを設定する

HTMLコード部分

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
 <メタ文字セット="UTF-8">
 <meta http-equiv="X-UA-compatible" content="IE=edge">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>ドキュメント</title>
 <link rel="スタイルシート" href="css/index.css" >
 <script src="js/index.js"></script>
</head>

<本文>
 <div class="focus">
 <a href="javascript:;" class="arrow_r">></a>
 <a href="javascript:;" class="arrow_l">
  <</a>
  <ul>
   <li>
   <a href=""><img src="images/focus.jpg" alt=""></a>
   </li>
   <li>
   <a href=""><img src="images/focus1.jpg" alt=""></a>
   </li>
   <li>
   <a href=""><img src="images/focus2.jpg" alt=""></a>
   </li>
   <li>
   <a href=""><img src="images/focus3.jpg" alt=""></a>
   </li>
  </ul>
  <ol class="circle">
  </ol>
 </div>
</本文>

</html>

CSSスタイル部分

* {
 パディング: 0;
 マージン: 0;
 }
 
 li {
 リストスタイル: なし;
 }
 
 画像 {
 境界線: 0;
 垂直方向の位置合わせ: 上;
 }
 
 {
 テキスト装飾: なし;
 }
 
 。集中 {
 位置: 相対的;
 幅: 721ピクセル;
 高さ: 455px;
 マージン: 100px 自動;
 オーバーフロー: 非表示;
 }
 
 .focus ul {
 位置: 絶対;
 上: 0;
 左: 0;
 幅: 600%;
 }
 
 .focus ul li {
 フロート: 左;
 }
 
 .arrow_r,
 .arrow_l {
 表示: なし;
 位置: 絶対;
 上位: 50%;
 変換: translateY(-50%);
 幅: 40px;
 高さ: 40px;
 行の高さ: 40px;
 テキスト配置: 中央;
 フォントサイズ: 24px;
 背景: rgba(0, 0, 0, .2);
 色: #fff;
 zインデックス: 1;
 }
 
 .arrow_r {
 右: 0;
 }
 
 。丸 {
 位置: 絶対;
 下: 10px;
 左: 50px;
 }
 
 .circle li {
 フロート: 左;
 幅: 8px;
 高さ: 8px;
 境界線: 2px実線rgba(255, 255, 255, .5);
 境界線の半径: 50%;
 マージン: 0 3px;
 カーソル: ポインタ;
 }
 
 。現在 {
 背景色: #fff;
 }

JavaScript部分

window.addEventListener('load', 関数() {
 //要素を取得します var focus = document.querySelector('.focus');
 var arrow_r = document.querySelector('.arrow_r');
 var arrow_l = document.querySelector('.arrow_l');
 focusWidth を focus.offsetWidth に設定します。
 // マウスがフォーカスボックスを通過すると、左ボタンと右ボタンが表示/非表示になり、カルーセルが一時停止します focus.addEventListener('mouseenter', function() {
 arrow_r.style.display = 'ブロック';
 arrow_l.style.display = 'ブロック';
 タイマーの間隔をクリアします。
 タイマー = null;
 });
 focus.addEventListener('mouseleave', 関数() {
 arrow_r.style.display = 'なし';
 arrow_l.style.display = 'なし';
 タイマー = setInterval(関数() {
  //クリックイベントを呼び出す arrow_r.click();
 }, 2000);
 });
 // 小さな円を動的に生成します var ul = focus.querySelector('ul');
 var ol = focus.querySelector('.circle');
 (var i = 0; i < ul.children.length; i++) の場合 {
 var li = document.createElement('li');
 li.setAttribute('インデックス', i);
 ol.appendChild(li);
 // 小さな円のクリックイベント li.addEventListener('click', function() {
  (var i = 0; i < ol.children.length; i++) {
  ol.children[i].className = '';
  }
  var index = this.getAttribute('index');
  num = インデックス;
  円 = インデックス;
  this.className = '現在の';
  アニメーション化(ul, -index * focusWidth);
 })
 }
 ol.children[0].className = '現在の';
 //最初の画像を複製し、最後の画像に配置します。var fis = ul.children[0].cloneNode(true);
 ul.appendChild(fis);
 // 右クリックイベント var num = 0;
 var 円 = 0;
 arrow_r.addEventListener('クリック', 関数() {
 num === ul.children.length - 1の場合{
  ul.style.left = 0;
  数値 = 0;
 }
 数値++;
 アニメーション化(ul, -num * focusWidth);
 サークル++;
 （円 === ul.children.length - 1）の場合{
  円 = 0;
 }
 (var i = 0; i < ol.children.length; i++) {
  ol.children[i].className = '';
 }
 ol.children[circle].className = '現在の';
 });
 //左ボタンクリックイベント arrow_l.addEventListener('click', function() {
 数値 == 0 の場合
  num = ul.children.length - 1;
  ul.style.left = -num * focusWidth + 'px';

 }
 数値--;
 アニメーション化(ul, -num * focusWidth);
 丸 - ;
 円 = 円 < 0 ? ol.children.length - 1 : 円;
 //関数circleChange()を呼び出します。
 });
 //残っている小さな円の現在のクラス名をクリアします function circleChange() {
 (var i = 0; i < ol.children.length; i++) {
  ol.children[i].className = '';
 }
 //現在の小さな円の現在のクラス名をそのままにします ol.children[circle].className = 'current';
 }
 //アニメーション関数 function animate(obj, target, callback) {
 タイマー間隔をクリアします。
 obj.timer = setInterval(関数() {
  var ステップ = (ターゲット - obj.offsetLeft) / 10;
  ステップ = ステップ > 0 ? Math.ceil(step) : Math.floor(step);
  obj.offsetLeft == ターゲットの場合 {
  タイマー間隔をクリアします。
  コールバック && コールバック();
  }
  obj.style.left = obj.offsetLeft + ステップ + 'px';

 }, 15);
 }
 //カルーセルを自動的に再生する var timer = setInterval(function() {
 //クリックイベントを呼び出す arrow_r.click();
 }, 2000);
});

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

以下もご興味があるかもしれません: