JavaScript を使用してカルーセル効果を実装する

JavaScript を使用してカルーセル効果を実装する

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

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
  <スタイル タイプ="text/css">
   .aaa {
    幅: 600ピクセル;
    高さ: 350ピクセル;
    position: relative;/*相対的な位置指定*/
    margin: 50px auto;/*上から50px、中央揃え*/
   }
   .画像イメージ {
    position: absolute;/*絶対位置*/
   }
   .dot {
    位置: 絶対;
    下: 5px;
   }
   .dot li {
    フロート: 左;
    幅: 16px;
    高さ: 16px;
    背景色: #e8e8e8;
    境界線の半径: 50%;
    list-style: none;/*リストスタイルをクリア*/
    右マージン: 10px;
    カーソル: ポインター;/*カーソルはリンクを示すポインター(手)としてレンダリングされます*/
   }
   。左 {
    幅: 30ピクセル;
    高さ: 30px;
    位置: 絶対;
    上: 169px;
    テキスト配置: 中央;
    背景色: #000000;
    行の高さ: 30px;
    色: #FFFFFF;
    カーソル: ポインター;/*カーソルはリンクを示すポインター(手)としてレンダリングされます*/
   }
   。右 {
    幅: 30ピクセル;
    高さ: 30px;
    位置: 絶対;
    上: 169px;
    右: 0;
    テキスト配置: 中央;
    背景色: #000000;
    行の高さ: 30px;
    色: #FFFFFF;
    カーソル: ポインター;/*カーソルはリンクを示すポインター(手)としてレンダリングされます*/
   }
   .aaa .スポット {
    背景色: #FF0000;
   }
  </スタイル>
 </head>
 <本文>
  <div class="aaa">
   <div class="picture">
    <img src="images/1.jpg" スタイル="幅: 600px;高さ: 350px;">
    <img src="images/2.jpg" スタイル="幅: 600px;高さ: 350px;">
    <img src="images/3.jpg" スタイル="幅: 600px;高さ: 350px;">
    <img src="images/4.jpg" スタイル="幅: 600px;高さ: 350px;">
    <img src="images/5.jpg" スタイル="幅: 600px;高さ: 350px;">
   </div>
   <ul class="dot">
    <li class="スポット"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
   <div class="left">&lt;</div><!--&lt; エスケープ文字-->
   <div class="right">&gt;</div><!--&gt; エスケープ文字-->
  </div>
  <スクリプト>
   var lis = document.querySelectorAll(".dot li")
   var picture = document.querySelectorAll(".picture img")
   var 左 = document.querySelector(".left")
   var right = document.querySelector(".right")
   var aaa = document.querySelector(".aaa")
   var index = 0 //インデックス番号変数を設定する picture[index].style.opacity = 1 //最初の画像が表示される //右ボタンで画像が変わる right.onclick = function() {
    fn("+")
   }
   //画像を変更するには左ボタンをクリックしますleft.onclick = function() {
    fn("-")
   }
   //タイマーは3000ミリ秒ごとに画像を変更します var timer = setInterval(function() {
    fn("+")
   }, 3000)
   //マウスが一時停止します aaa.onmouseover = function() {
    クリアインターバル(タイマー)
   }
   //マウスアウトして続行 aaa.onmouseout = function() {
    タイマー = setInterval(関数() {
     fn("+")
    }, 3000)
   }
   //マウスがドットに触れたときに画像を変更する for (var i = 0; i < lis.length; i++) {
    lis[i].in = i
    lis[i].onmouseover = 関数() {
     fn(これ.in)
    }
   }
   //関数 function fn(ope) {
    picture[index].style.opacity = 0 //前の画像は非表示 lis[index].className = "" //小さなドットスタイルをクリア//Judge ope
    if (typeof ope === 'number') {
     インデックス = ope
    } else if (ope === '+') { //右ボタンかどうかを判断 if (index === 4) {
      インデックス = 0
     } それ以外 {
      インデックス++
     }
    } それ以外 {
     if (index === 0) { //左ボタンのインデックスが4かどうかを判断します
     } それ以外 {
      索引 - 
     }
    }
    picture[index].style.opacity = 1 //現在の画像 displaylis[index].className = "spot" //スポットにスタイルを追加}
  </スクリプト>
 </本文>
</html>

効果は図に示されています:

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

以下もご興味があるかもしれません:
  • JavaScriptカルーセルの実装について
  • カルーセル例の JS 実装
  • JS でカルーセル効果を実現する 3 つの簡単な方法
  • カルーセル効果を実現するための純粋なjs
  • ブリージングカルーセルを実装するネイティブJS
  • JavaScript による Web ページ カルーセルの超詳細な実装

<<:  LinuxシステムでFuserコマンドを使用する方法

>>:  MySQL 条件付きクエリと使用法および優先順位の例の分析

推薦する

Nginx はリクエスト接続を統合し、ウェブサイトのアクセス例を高速化します

序文世界最高の Web サーバーの 1 つである Nginx の利点は明らかです。 Nginx がリ...

MySQL の日付関数と日付変換およびフォーマット関数

MySQL は、膨大なユーザーベースを持つ無料のリレーショナル データベースです。この記事では、My...

MySQLのスロークエリの詳細な説明

MySQL操作情報のクエリ show status -- すべての MySQL 操作情報を表示します...

JavaScript が Jingdong の虫眼鏡の特殊効果を模倣

この記事では、Jingdong虫眼鏡を模倣したJavaScriptの具体的なコードを参考までに共有し...

Vue3.0 ルーティング自動インポート方法の例

1. 前提条件インポートには require.context メソッドを使用します。vite で作成...

よく使われるCSSスタイル(レイアウト)の詳しい説明

新しいCSS3プロパティと互換性ありCSS3では、プラグインprefixfree.min.jsを使用...

長いデータを HTML で表示するときに処理する方法

HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...

JS 関数のアンチシェイクと関数スロットリングを理解する方法

目次概要1. 関数デバウンス2. 機能スロットリング(スロットル)概要関数アンチシェイクと関数スロッ...

CSS3で実装されたテキストポップアップ効果

成果を達成する実装コードhtml <div>123WORDPRESS.COM</d...

リンクをクリックしたときに表示される点線のボックスを削除するいくつかの方法

削除する方法はいくつかあります:リンクを直接追加するonfocus="this.blur(...

MySQL 8.0.23 メジャーアップデート (新機能)

著者: Guan Changlong は、Aikesheng の配送サービス部門の DBA です。主...

おすすめの無料英語手書きフォント20選

Jellyka Beesアンティーク手書き [ank]* ジェリーカ・カティカップケーキ LHF ジ...

重複したMySQLレコードを現場でチェックし、処理する実践的な記録

目次序文分析するデータ合計繰り返し率どこにあるかと持っているかの違い要約する序文私はソフトウェアの導...

時間に基づいて日付をクエリするためのMySQL最適化テクニック

たとえば、昨日新規登録されたユーザーを照会するには、次の 2 つの書き方があります。 説明する ch...

CSS コンテンツ属性を使用して、マウスホバープロンプト (ツールチップ) 効果を実現します。

なぜこのような効果を実現するのでしょうか。実は、この効果もタイトルプロンプトから派生したものですが、...