この記事では、カルーセルの効果を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Mysql の一時テーブルとパーティションテーブルの違いの詳細な説明
>>: Linux インストール MongoDB の起動と一般的な問題の解決
この記事では、ビデオプレイリストを実装するためのvue + video.jsの具体的なコードを参考ま...
プラグインは Firefox ブラウザにインストールされます。 Web Developer プラグイ...
背景:以前、コンテナ内のホストが提供する Redis サービスにアクセスする必要があるプロジェクトを...
この記事の例では、カルーセルのフレームレート再生を実現するためのVueの具体的なコードを参考までに共...
この記事では、カルーセルアニメーションを実現するためのVueコンポーネントの具体的なコードを例として...
Centos6にZLMediaKitをインストールするZLMediaKit の作者は Ubuntu ...
1. Oracle をインストールします。インターネット上には Oracle のインストール手順が多...
カウントダウン効果を実現するにはJavascriptを使用します。参考までに、具体的な内容は次のとお...
目次ToDoリストを例に挙げましょうディレクトリは次のとおりですアプリ入力.jsリスト.jsアイテム...
ターミナル分割画面ツールは2つあります: screen と tmux 1. 画面分割を使用する(上下...
<br />製品設計プロセス全体において、ビジュアルデザインとインタラクションデザインの...
目次1. フォークの起源2. 初期のUNIXオーバーレイ技術3. UNIXに導入される前のフォークの...
昨日、ある人のシステムのインストールを手伝ったのですが、自動パーティション分割をクリックするのを忘れ...
1. Linuxに対応するRPMパッケージをダウンロードする5.6 より前のバージョンhttp://...