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 条件付きクエリと使用法および優先順位の例の分析

推薦する

Vue3カプセル化メッセージメッセージプロンプトインスタンス関数の詳細な説明

目次Vue3 カプセル化メッセージプロンプトインスタンス関数スタイルレイアウトカプセル化メッセージ....

MySQL マスタースレーブレプリケーションプロセスの詳細な説明

1. マスタースレーブレプリケーションとは何ですか?マスター データベースの DDL および DML...

nginx+uwsgi で Django プロジェクトを開始するための詳細な手順

Django で Web プロジェクトを開発する場合、開発およびテストのプロセスでは Django ...

Linux で JDK をインストールして環境変数を設定する方法 (この記事で十分です)

目次1. Linuxのビット数を確認する2. JDKをダウンロードする3. JDKをインストールする...

HTML テーブル マークアップ チュートリアル (2): テーブル境界属性 BORDER

デフォルトでは、テーブルの境界線は 0 ですが、テーブルの境界線を設定できます。基本的な構文<...

MySQLが日付フィールドインデックスを使用しない理由の要約

目次背景探検する要約する背景テーブルでは、dataTime フィールドは varchar 型に設定さ...

Webデザインの経験:ナビゲーションシステムをシンプルにする

<br />友人と話し合っていたとき、フレームワークのレイヤー設計の中で最も核となるのは...

Linux でのインストール中にソフトウェア パッケージの依存関係レポートに関連する問題の解決策

目次背景1) yumのkeepchche機能を有効にする: 方法1 2) yum-utils ソフト...

Tinymce リッチテキストを使用して Vue のツールバーボタンをカスタマイズする実践

目次tinymce、tinymce ts、tinymce-vue 宣言ファイルをインストールするパッ...

スケルトンスクリーン効果を実現する CSS

ネットワーク データを読み込むときは、ユーザー エクスペリエンスを向上させるために、通常は円形の読み...

nginx rewriteを使用してURLをリダイレクトする方法

最近仕事でnginxの設定を変更する必要が頻繁にあり、nginxでrewriteを使用する方法を学び...

Element-UIの10の驚くべきトリックのまとめ

目次el-scrollbar スクロールバーel-uploadはクリックをシミュレートしますel-s...

主軸上のFlex子要素の比率を制御する方法

背景フレックス レイアウトにより、配置とスペースの割り当てがより効果的に実現されます。最近、flex...

HTML タグ sup と sub の応用の紹介

HTML タグ: 上付き文字HTML では、<sup> タグは上付き文字のテキストを定義...

WeChatアプレットのスクロールビューは、プルアップ時にデータの読み込みを重複させるソリューションを実装しています。

WeChat アプレットのスクロール ビューでは、プルアップして読み込むときにバグが多く発生します...