この記事では、カルーセルの効果を実現するための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 の起動と一般的な問題の解決
CSS 要素内の計算されたスタイル (つまり、カスケード後の最終的なスタイル) を取得するには、W3...
目次forEach() (ES6) メソッドmap() (ES6) メソッドflatMap() メソ...
1. CSS ボックスモデルボックスには、余白、境界線、パディング、コンテンツが含まれます境界線の接...
IE8には複数の互換モードがあります。 IE プラットフォームの設計者である Chris Wilso...
ドキュメント モードには次の 2 つの機能があります。 1. HTML文書を解析するためにどのHTM...
<br />元のアドレス: http://andymao.com/andy/post/8...
質問: Vue にブログ投稿をアップロードするためのフォームがあり、タイトル、本文、説明、スニペット...
1. はじめに最近、 Webpackの原理を勉強しています。これまでは Webpack の設定方法し...
このチュートリアルでは、参考までにMySQL 8.0.19のインストールチュートリアルを共有します。...
目次序文シナリオ分析要約する序文数日前、友人がWeChatで私に連絡してきて、マシンがダウンタイムか...
前の記事では、deepin linux に新しいカーネルを手動でインストールする方法について説明しま...
序文バックエンド開発では、一度に大量のデータがロードされ、メモリやディスク IO のオーバーヘッドが...
目次1. サブクエリの定義2. サブクエリの分類1. スカラーサブクエリ: 2. MySQLサブクエ...
目次1. 場所オブジェクト1. URL 2. 場所オブジェクトのプロパティ3. ロケーションオブジェ...
この記事の例では、簡単な計算機を実装するための小さなプログラムの具体的なコードを参考までに共有してい...