カルーセルの制作方法を実現するjs

カルーセルの制作方法を実現するjs

この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

効果は図の通りです

コードは次のとおりです。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <タイトル></タイトル>
  
  <スタイル タイプ="text/css">
   
   * {
    パディング: 0;
    マージン: 0;
   }
   。容器 {
    位置: 相対的;
    幅: 600ピクセル;
    高さ: 300px;
    マージン: 30px 自動;
    オーバーフロー: 非表示;
   }
       。左 {
     表示: なし;
     位置: 絶対;
     上位: 50%;
     左: -20px;
     変換: translateY(-50%);
     幅:50px;
     高さ: 50px;
     境界線の右上の半径: 50%;
     境界線の右下の半径: 50%;
     背景色: rgba(0,0,0,0.5);
     zインデックス: 999;
    }
    .左 i {
    表示: ブロック;
       上マージン: 10px;
    左マージン: 20px;
    幅: 30ピクセル;
    高さ: 30px;
    背景: url(img/left.png) 繰り返しなし;
    背景サイズ: 30px 30px;
    }
   。右 {
    表示: なし;
    位置: 絶対;
    上位: 50%;
    右: -20px;
    変換: translateY(-50%);
    幅:50px;
    高さ: 50px;
    左上の境界線の半径: 50%;
    左下の境界線の半径: 50%;
    背景色: rgba(0,0,0,0.5);
    zインデックス: 999;
   }
   .right i {
     表示: ブロック;
     上マージン: 10px;
     右マージン: 20px;
     幅: 30ピクセル;
     高さ: 30px;
     背景: url(img/right.png) 繰り返しなし;
     背景サイズ: 30px 30px;
    }
   
   ウル リ、オル リ {
    リストスタイル: なし;
   }
   。写真 {
    位置: 絶対;
   }
   .リスト{
    位置: 絶対;
    下: 10px;
    左: 10px;
   }
      .list li {
    フロート: 左;
    右マージン: 10px;
    幅: 10px;
    高さ: 10px;
    境界線の半径: 10px;
    背景色: rgba(0,0,0,0.5);
    カーソル: ポインタ;
   }
   .list .current {
    背景色: #fff;
   }
   .picture li {
    位置: 絶対;
    幅: 600ピクセル;
    高さ: 300px;
   }
   画像 {
    幅: 100%;
    高さ: 100%;
   }
   
  </スタイル>
 </head>
 <本文>
  <div class="コンテナ">
   <span class="left"><i></i></span>
   <span class="right"><i></i></span>
   <ul class="picture">
    <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>
   </ul>
   <ol class="リスト">
   </ol>
  </div>
  <script type="text/javascript">
   var picture = document.querySelector('.picture');
   var list = document.querySelector('.list');
   var 数値 = 0;
   var 円 = 0;
   (i=0;i<picture.children.length;i++) の場合
   {   
    // 画像の位置を設定します。 picture.children[i].style.left = i*600 + 'px';
    // 順序付きリストを自動的に生成します var li = document.createElement('li');
    li.setAttribute('index',i);
    
    リストに追加される子要素は li です。
    // liにクリックイベントを追加します li.addEventListener('click',function () {
     (var i=0;i<list.children.length;i++) の場合 {
      list.children[i].className = '';
     }
     this.className = '現在の';
     var index = this.getAttribute('index');
     num = インデックス;
     円 = インデックス;
     アニメーション化(画像、インデックス*600);
    })
   }
   // 最初の子要素のクラス名を設定します。list.children[0].className = 'current';
   var left = document.querySelector('.left');
   var right = document.querySelector('.right');
   var コンテナ = document.querySelector('.container');
   // マウスがイベントコンテナから離れるように設定します。addEventListener('mouseover',function () {
    left.style.display = 'ブロック';
    right.style.display = 'ブロック';
    クリアインターバル(タイマー)
    タイマー = null;
   })
   コンテナ.addEventListener('mouseleave',関数() {
    left.style.display = 'なし';
    right.style.display = 'なし';
    タイマー = setInterval(関数() {
     右クリック();
    },1000);
   })
   
   // js アニメーション関数 function animate (obj, target, callback) {
    クリア間隔(obj.timer) 
    obj.timer = setInterval(関数() {
     var ステップ = (ターゲット - obj.offsetLeft)/10;
     ステップ = ステップ > 0 ? Math.ceil(step) : Math.floor(step);
     if(obj.offsetLeft == ターゲット) {
      タイマー間隔をクリアします。
      if (コールバック) {
       折り返し電話();
      }
     }
     obj.style.left = obj.offsetLeft + ステップ + 'px';
    },15)
   }
   
   var first = picture.children[0].cloneNode(true);
   picture.appendChild(最初の);
   picture.lastChild.style.left = (picture.children.length-1)*600 + 'px';
   // 右クリック eventright.addEventListener('click',function () {
    num ==picture.children.length-1の場合{
     画像スタイル左 = 0;
     数値 = 0;
    }
    数値++;
    アニメーション(画像、-num*600);
    円++;
    (円 == リストの子の長さ)の場合{
     円 = 0;
    }
    
    (var i = 0;i<list.children.length;i++) の場合 {
     list.children[i].className = '';
    }
    list.children[circle].className = 'current';
   })
   // 左クリックイベント left.addEventListener('click',function () {
    数値==0の場合{
     picture.style.left = -(picture.children.length-1)*600 +'px';
     num = picture.children.length-1;
    }
    数値--;
    アニメーション(画像、-num*600);
    丸  - ;
    (円<0)の場合{
     円 = リストの子の長さ-1;
    }
    
    (var i = 0;i<list.children.length;i++) の場合 {
     list.children[i].className = '';
    }
    list.children[circle].className = 'current';
   })
   
   var タイマー = setInterval(関数 () {
    // right.click() を手動で呼び出します。
   },1000);
  </スクリプト>
 </本文>
</html>

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

以下もご興味があるかもしれません:
  • カルーセルの完全なコードを実装するためのjs
  • ネイティブ js でカルーセルを実装するためのサンプル コード
  • 携帯電話のスライドスイッチカルーセル画像の例をサポートする効果を実現するためのjs
  • JS カルーセル図の実装の簡単なコード
  • js で左右のボタンをクリックして画像を再生する
  • JSは自動カルーセル効果(適応型画面幅+携帯電話タッチスクリーンスライド)を実現します
  • JSは左右のシームレスなカルーセルコードを実装します
  • html+js+css を使用してページ カルーセル効果を実現する (例の説明)
  • 無限ループカルーセル効果を実現するネイティブ js
  • jsは左から右へのスライドカルーセル効果を実現します

<<:  Linux サーバーに Python3 をインストールする 2 つの方法

>>:  MySQL 8.0.15 のインストールと設定のグラフィックチュートリアルと Linux でのパスワード変更

推薦する

MySQL 8.0.15 インストール グラフィック チュートリアルとデータベースの基礎

MySQLソフトウェアのインストールとデータベースの基礎は参考用です。具体的な内容は次のとおりです。...

いくつかの重要なMySQL変数

MySQL 変数は数多くありますが、その中には注目に値するものもあります。ここでは、参考までに、注目...

フロントエンドとバックエンド分離プロジェクトのDockerデプロイメントの実装例

目次1. 環境整備2. イメージを実行する問題を解決するRedis のインストールNginx のイン...

MySQL で datetime 型のデフォルト値を設定する方法

Navicat クライアントを通じてデフォルトの日時値を変更する際に問題が発生しました。データベース...

Facebookの情報アーキテクチャの分析

<br />原文: http://uicom.net/blog/?p=762 Faceb...

dl、dt、dd リスト ラベルの例

dd タグと dt タグはリストに使用されます。通常は <ul><li> タ...

CSS エラスティック ボックス flex-grow、flex-shrink、flex-basis の詳細な説明

3 つの属性 flex-grow、flex-shrink、flex-basis の機能は次のとおりで...

MySQL の大きなテーブルで大量のデータを一括削除する方法

質問はhttps://www.zhihu.com/question/440066129/answer...

ソフトウェア 404 と 404 エラーとは何か、またそれらの違いは何ですか

まず、404 とソフト 404 とは何でしょうか? 404: 簡単に言えば、ユーザーが存在しないペー...

MySQL で lower_case_table_names を記録する際の落とし穴の詳細な説明

1 原因プロジェクトがデータベースを移行して再起動した後、「T_AAAテーブルが存在しません」という...

共有サイドバーを実装するためのネイティブJS

この記事では、ネイティブ JS で実装された共有サイドバーを紹介します。効果は次のとおりです。 以下...

JS で async と await を使用する方法

目次1. 非同期2. 待つ: 3. 包括的なアプリケーション1. 非同期async 、非同期コードが...

Webpack ファイル パッケージ化エラー例外

webpack をパッケージ化する前に、次の作業が完了していることを確認する必要があります。 1) ...

純粋な CSS3 で蝶が羽ばたく様子を再現する例

純粋なCSS3で蝶が羽ばたく様子を再現。まずはその効果をご覧ください どうですか?効果はかなりいいで...

CSS に基づいて MaterialUI ボタン​​クリックアニメーションを実装し、それを React コンポーネントにカプセル化します。

序文フロントエンドフレームワークのヘビーユーザーとして、私はテクノロジーを選択する際にそのエコロジー...