カルーセル効果を実現するネイティブJavaScript

カルーセル効果を実現するネイティブJavaScript

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

1. 機能:

1. 2.5 秒ごとに次のスライドショーに自動的に切り替えます。

2. 下のボタンは対応するカルーセル画像を切り替えます。

3. マウスを内側に動かすと自動切り替えが一時停止し、外側に動かすと開始します。

4. マウスを動かすと左右の切り替えボタンが表示され、カルーセルを左右に切り替えることができます。

2. エフェクト(GIF):

3. コード:

構造レイヤー (HTML)

<div class="box">
 <img src="./image/banner1.jpg" />
 <div class="左矢印">
  <img src="./image/left.png" />
 </div>
 <div class="右矢印">
  <img src="./image/right.png" />
 </div>
 <ul class="button"></ul>
</div>

プレゼンテーション層 (CSS)

。箱 {
 幅: 300ピクセル;
 高さ: 200px;
 背景: #333;
 境界線の半径: 5px;
 オーバーフロー: 非表示;
 マージン: 0 自動;
 フォントサイズ: 0;
 位置: 相対的;
 ディスプレイ: フレックス;
 アイテムの位置を中央揃えにします。
}
 
.box:hover .arrows{
 表示: ブロック;
}
 
.box 画像{
 幅: 100%;
}
 
.矢印{
 幅: 20px;
 テキスト配置: 中央;
 位置: 絶対;
 上位: 50%;
 変換: translateY(-50%);
 zインデックス: 9;
 フォントサイズ: 30px;
 表示: なし;
}
 
。左{
 左: 10px;
}
 
。右{
 右: 10px;
}
 
。ボタン{
 リストスタイル: なし;
 マージン: 0;
 パディング: 0;
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 位置: 絶対;
 下: 10px;
 左: 50%;
 変換: translateX(-50%);
}
 
.ボタン li {
 幅: 20px;
 高さ: 5px;
 境界線の半径: 1px;
 背景: #fff;
 マージン: 0 2px;
}
 
。アクティブ {
 背景: 赤 !重要;
}

動作レイヤー (JavaScript)

let count = 0 // 現在のカルーセルインデックスを作成する // DOM要素を取得する let box = document.querySelector('.box')
img = document.querySelector('img') とします。
left = document.querySelector('.left') とします。
右 = document.querySelector('.right') とします。
ul = document.querySelector('ul') とします。
 
// カルーセル画像配列 let imgArr = [
 './image/banner1.jpg',
 './image/banner2.jpg',
 './image/banner3.jpg',
 './image/banner4.jpg'
]
 
// 画像配列を走査し、対応する下部スイッチ li タグを追加します imgArr.forEach(() => {
 li = document.createElement('li') とします。
 ul.appendChild(li)
})
 
let lis = document.querySelectorAll('li') // すべてのliタグを取得 lis[0].className = 'active' // 最初のliタグに選択状態を追加 // スライドショーを切り替える function switchImg (type) {
 関数()を返す{
  if(type == 1) {
   if(count - 1 < 0) {
    カウント = imgArr.length - 1
   } それ以外 {
    カウント += -1
   }
  } それ以外 {
   if(count + 1 >= imgArr.length) {
    カウント = 0
   } それ以外 {
    カウント += 1
   }
  }
  img.src = imgArr[カウント]
  lis.forEach((v,i) => {
   lis[i].className = ''
   if(i == カウント) {
    lis[i].className = 'アクティブ'
   }
  })
 }
}
 
left.addEventListener('click', switchImg(1)) // 前のスライドショー right.addEventListener('click', switchImg(2)) // 次のスライドショー // スライドショーを切り替えるには、下の li タグをクリックします lis.forEach((value,index) => {
 lis[インデックス].addEventListener('クリック', () => {
  lis.forEach((v,i) => {
   lis[i].className = ''
  })
  カウント = インデックス
  img.src = imgArr[カウント]
  lis[count].className = 'アクティブ'
 })
})
// 2.5秒ごとに次のスライドに自動的に切り替わるタイマーを作成する let swiper = setInterval(() => {
 右クリック()
},2500)
//マウスが入り、自動切り替えを一時停止します。box.onmouseenter = () => {
 clearInterval(スワイパー)
}
//マウスを離すと自動切り替えが開始されます box.onmouseleave = () => {
 スワイパー = setInterval(() => {
  右クリック()
 },1500)
}

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

以下もご興味があるかもしれません:
  • JS は複数のタブを切り替えるカルーセルを実装します
  • jsを使用してシンプルなカルーセル効果を実現する
  • シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)
  • シンプルなカルーセル チャートを実装するための JavaScript の最も完全なコード分析 (ES5)
  • カルーセルの完全なコードを実装するためのjs
  • ネイティブ js でカルーセルを実装するためのサンプル コード
  • 携帯電話のスライドスイッチカルーセル画像の例をサポートする効果を実現するためのjs
  • JS カルーセル図の実装の簡単なコード
  • js で左右のボタンをクリックして画像を再生する
  • カルーセル例の JavaScript 実装

<<:  Mysql の一時テーブルとパーティションテーブルの違いの詳細な説明

>>:  Linux インストール MongoDB の起動と一般的な問題の解決

推薦する

Vue+video.jsはビデオプレイリストを実装します

この記事では、ビデオプレイリストを実装するためのvue + video.jsの具体的なコードを参考ま...

ウェブデザインに必須のツール: Firefox Web Developer プラグイン CSS ツールセットのチュートリアル

プラグインは Firefox ブラウザにインストールされます。 Web Developer プラグイ...

Centos Docker ブリッジ モードでホスト Redis サービスにアクセスできないというトラブルシューティングの経験

背景:以前、コンテナ内のホストが提供する Redis サービスにアクセスする必要があるプロジェクトを...

Vueはカルーセルのフレームレート再生を実装します

この記事の例では、カルーセルのフレームレート再生を実現するためのVueの具体的なコードを参考までに共...

カルーセルアニメーションを実現するVueコンポーネント

この記事では、カルーセルアニメーションを実現するためのVueコンポーネントの具体的なコードを例として...

CentOS 6 ZLMediaKit のコンパイルとインストール分析

Centos6にZLMediaKitをインストールするZLMediaKit の作者は Ubuntu ...

Windows Server 2016 に Oracle をインストールする方法

1. Oracle をインストールします。インターネット上には Oracle のインストール手順が多...

JavaScript でカウントダウン効果を実装する

カウントダウン効果を実現するにはJavascriptを使用します。参考までに、具体的な内容は次のとお...

Reactはtodolistの追加、削除、変更、クエリを実装します

目次ToDoリストを例に挙げましょうディレクトリは次のとおりですアプリ入力.jsリスト.jsアイテム...

...

Linux コマンドラインターミナルで画面を分割するための 2 つのツール

ターミナル分割画面ツールは2つあります: screen と tmux 1. 画面分割を使用する(上下...

ビジュアルデザインとインタラクションデザインについて

<br />製品設計プロセス全体において、ビジュアルデザインとインタラクションデザインの...

Unix/Linuxフォークの隠れたオーバーヘッド

目次1. フォークの起源2. 初期のUNIXオーバーレイ技術3. UNIXに導入される前のフォークの...

CentOS7でパーティションのサイズを変更する方法

昨日、ある人のシステムのインストールを手伝ったのですが、自動パーティション分割をクリックするのを忘れ...

CentOS 6.5 に MySQL 5.6 をインストールするチュートリアル

1. Linuxに対応するRPMパッケージをダウンロードする5.6 より前のバージョンhttp://...