シームレスなカルーセル効果を実現するネイティブ js

シームレスなカルーセル効果を実現するネイティブ js

参考までに、ネイティブjsでカルーセル効果(シームレススクロール)を実現しています。具体的な内容は以下のとおりです。

効果画像:

コード:

<!DOCTYPE html>
<html lang="ja">
<!-- day07 7-10-14 -->
 
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>ドキュメント</title>
 <script src="./images1/20.animate.js"></script>
 <スタイル>
 * {
  マージン: 0;
  パディング: 0;
 }
 
 li {
  リストスタイル: なし;
 }
 
 。集中 {
  /*オーバーフロー: 非表示;*/
  位置: 絶対;
  上: 100px;
  左: 200px;
  幅: 721ピクセル;
  高さ: 455px;
  背景色: 茶色;
 }
 
 .前,
 。次 {
  表示: なし;
  位置: 絶対;
  上位: 50%;
  上マージン: -15px;
  幅: 20px;
  高さ: 30px;
  背景色: rgba(0, 0, 0, .3);
  テキスト装飾: なし;
  色: #fff;
  行の高さ: 30px;
  テキスト配置: 中央;
  フォントサイズ: 16px;
  zインデックス: 2;
 }
 
 .focus ul {
  /* アニメーション js ファイルの導入には位置決めが必要です */
  位置: 絶対;
  幅: 600%;
 }
 
 .focus ul li {
  フロート: 左;
 }
 
 .前へ {
  左: 0;
  右上の境界線の半径: 15px;
  右下の境界線の半径: 15px;
 }
 
 。次 {
  右: 0;
  左上の境界線の半径: 15px;
  左下の境界線の半径: 15px;
 }
 
 .プロモナビ{
  位置: 絶対;
  下: 10px;
  左: 60px;
  幅: 200ピクセル;
  高さ: 18px;
  境界線の半径: 9px;
 }
 
 .promo-nav li {
  フロート: 左;
  幅: 10px;
  高さ: 10px;
  背景色: #fff;
  マージン: 2px;
  境界線の半径: 50%;
 }
 
 .promo-nav .current {
  背景色: オレンジ;
 }
 .focus ul li a img {
  幅: 721ピクセル;
  高さ: 455px;
 }
 </スタイル>
</head>
 
<本文>
 <div class="focus">
 <ul>
  <li>
  <a href="#" ><img src="images1/focu01.jpg" alt=""></a>
  </li>
  <li>
  <a href="#" ><img src="images1/focu02.jpg" alt=""></a>
  </li>
 
  <li>
  <a href="#" ><img src="images1/focu03.jpg" alt=""></a>
  </li>
  <li>
  <a href="#" ><img src="images1/focu04.jpg" alt=""></a>
  </li>
 
 </ul>
 <!-- 左ボタン -->
 <a href="javascript:;" class="prev">&lt;</a>
 <!-- 右ボタン -->
 <a href="javascript:;" class="next">&gt;</a>
 
 <ol class="promo-nav">
 
 </ol>
 </div>
 <スクリプト>
 window.addEventListener('load', 関数() {
  var focus = document.querySelector('.focus');
  var prev = document.querySelector('.prev');
  var next = document.querySelector('.next');
  focusWidth を focus.offsetWidth に設定します。
  //マウスが通過する focus.addEventListener('mouseenter', function() {
   prev.style.display = 'ブロック';
   next.style.display = 'ブロック';
   タイマーの間隔をクリアします。
   timer = null; // タイマー変数をクリアする })
  //マウスがfocus.addEventListener('mouseleave', function() {から離れます
   prev.style.display = 'なし';
   next.style.display = 'なし';
   タイマー = setInterval(関数() {
   次へをクリックします。
   }, 2000)
 
  })
  //3. 小さな円を動的に生成します。写真の数だけ小さな円を生成します。var ul = focus.querySelector('ul');
  var ol = focus.querySelector('.promo-nav');
  // コンソール.log(ul.children.length); 4
  (var i = 0; i < ul.children.length; i++) の場合 {
  //liを作成する
  var li = document.createElement('li');
  //カスタム属性を通じて現在の小さな円のインデックス番号を記録します li.setAttribute('index', i);
  //ol の後に挿入 ol.appendChild(li);
  //4. マウスで小さな円をクリックして色を変更します(現在のクラスを小さな円に追加し、他の小さな円からこのクラスを削除します)(独自のアイデア)
  // 小さな円を生成するときにクリックイベントを直接バインドします li.addEventListener('click', function() {
   (var i = 0; i < ol.children.length; i++) {
   ol.children[i].className = '';
   }
   this.className = '現在の';
 
 
   //5. 小さな点をクリックして画像を移動します。ul が移動します。
   // ul が移動する距離は、小さい円のインデックス番号に画像の幅を掛けた値です。負の値であることに注意してください。// 小さい li をクリックすると、現在の小さい li のインデックス番号が取得されます。var index = this.getAttribute('index');
   //特定のliをクリックすると、liのインデックス番号がnumに渡されます
   num = インデックス;
   //特定のliをクリックすると、liのインデックス番号がindexに渡されます
   円 = インデックス;
   コンソールログ(インデックス);
 
   アニメーション化(ul, -index * focusWidth, );
  })
 
  }
  //olの最初のliの色を白に設定します。ol.children[0].className = 'current';
  //6. 最初の li を複製し、ul の後ろに配置します。var first = ul.children[0].cloneNode(true);
  ul.appendChild(最初の子);
  //7. 右側のボタンをクリックして 1 枚の画像をスクロールします。var num = 0;
  var 円 = 0;
  var フラグ = true;
  //右ボタン next.addEventListener('click', function() {
   if (フラグ) {
   flag = false; //最初にスロットルを閉じる //5. 最後にコピーした画像に到達すると、ul はすぐに左を 0 に復元します (シームレス スクロール)
   num == ul.children.length - 1の場合{
    ul.style.left = 0;
    数値 = 0;
   }
   数値++;
   アニメーション(ul, -num * focusWidth, 関数() {
    フラグ = true;
   });
   //8. 右側のボタンをクリックすると、それに応じて小さい円が変化します。小さい円の変化を制御する変数を宣言します。circle++;
   //circleが4に等しい場合、最後の画像の複製が完了したことを意味し、それを復元します。if (circle == ol.children.length) {
    円 = 0;
   }
   // // 残っている小さな円のクラス名をクリアします// for (var i = 0; i < ol.children.length; i++) {
   // ol.children[i].className = '';
   // }
   // // 現在の小さな円の現在のクラス名を残します// ol.children[circle].className = 'current';
   円の変更();
   }
  })
  //左ボタン prev.addEventListener('click', function() {
  if (フラグ) {
   フラグ = false;
   //5. 最後にコピーした画像に到達すると、ul はすぐに左を 0 に戻します (シームレス スクロール)
   数値 == 0 の場合
   num = ul.children.length - 1;
   ul.style.left = -num * focusWidth + 'px';
 
   }
   数値--;
   アニメーション(ul, -num * focusWidth, 関数() {
   フラグ = true;
   });
   //8. 右側のボタンをクリックすると、それに応じて小さい円が変化します。小さい円の変化を制御する変数を宣言します。circle--;
   //circleが0より小さい場合、小さい円は4番目の小さい円に変更されます if (circle < 0) {
   円 = ol.children.length - 1;
   }
   // 残りの小さな円のクラス名をクリアします // for (var i = 0; i < ol.children.length; i++) {
   // ol.children[i].className = '';
   // }
   // 現在の小さな円を現在のクラス名のままにします // ol.children[circle].className = 'current';
   円の変更();
  }
  })
 
  関数circleChange() {
  //残りの小さな円のクラス名をクリアします for (var i = 0; i < ol.children.length; i++) {
   ol.children[i].className = '';
  }
  //現在の小さな円を現在のクラス名のままにします ol.children[circle].className = 'current';
  }
 
  //10. スライドショーを自動的に再生する var timer = setInterval(function() {
  次へをクリックします。
  }, 2000)
 
 })
 </スクリプト>
</本文>
 
</html>

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

以下もご興味があるかもしれません:
  • JavaScript で円形カルーセルを実装する
  • JS でカルーセル画像を実装するいくつかの方法
  • カルーセル効果を書くためのjs
  • JavaScript ベースのシンプルなカルーセルの実装
  • JavaScript が Jingdong のカルーセル効果を模倣
  • JavaScript Domはカルーセルの原理と例を実装します
  • モバイルカルーセルスライドスイッチを実現する js
  • スクロールホイールカルーセル画像を実現するための JavaScript
  • ネイティブ Js で実装されたシンプルなシームレス スクロール カルーセルのサンプル コード

<<:  CentOS 上での MySQL 5.6 のコンパイルとインストール、および複数の MySQL インスタンスのインストールの詳細な説明

>>:  IIS 7.5はURL書き換えモジュールを使用してWebページのリダイレクトを実現します。

推薦する

Docker で Ubuntu に Python3 と Pip をインストールする際の問題

文章1) Ubuntuイメージをダウンロードする docker プル Ubuntu 2) 画像を見る...

Vueユーザーが長時間操作せずにログインページからログアウトするように実装する2つの方法

目次問題の説明フロントエンド制御(方法1)アイデアコードバックエンド制御(方法2)アイデアコード要約...

Linux が Sudo 権限昇格の脆弱性を公開、どのユーザーでも root コマンドを実行可能

Linux で最も一般的に使用される重要なユーティリティの 1 つである Sudo は、ほぼすべての...

Ubuntu で G++ を使用して CPP ファイルをコンパイルする

g++ を使用して初めて cpp ファイルをコンパイルしたとき、未定義の参照エラーが報告されました。...

Docker で MySQL マスターとスレーブをデプロイする方法

画像をダウンロードMySQLイメージの選択 docker 検索 mysql MySQL 5.7 イメ...

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

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

Jsonフォーマットの詳細な説明

目次JSON は次の 2 つの構造に基づいて構築されます。 2. JSON形式1. オブジェクト2....

クールな点滅アラームボタンをおすすめします

効果は以下のとおりです。 コードは次のとおりです (クリックすると展開してソース コードが表示されま...

開発環境にUbuntu 16をインストール後の初期設定

オフィスでは、Linux 開発環境として Ubuntu システムが必要です。現在、Ubuntu 16...

PC/Pad/Phoneデバイスに自動的に適応するCSSウェブページレスポンシブレイアウト

序文最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在...

MySQL 5.7.30 のインストールとアップグレードの問題に関する詳細なチュートリアル

くさびコンピュータにインストールされている MySQL のバージョンが比較的古く、おそらくバージョン...

Tomcat 経由で JMX 監視を有効にする方法

シミュレーション環境を構築する:オペレーティングシステム: centos7メモリ: 1G 1.8.0...

MySQL でタイムゾーンを表示および変更する方法

今日、プログラムが間違った時刻を挿入し、フィールドがデフォルト値 CURRENT_TIMESTAMP...

CentOS7.8 に mysql 8.0.20 をインストールするための詳細なチュートリアル

1. MySQLソフトウェアをインストールするMySQL 公式 Yum リポジトリ、MySQL バー...

MySQL に外部キー制約を追加する具体的な方法

このチュートリアルの動作環境: Windows 7 システム、MySQL 8 バージョン、Dell ...