この記事では、カルーセルマップの特殊効果を実現するための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"><</div><!--< エスケープ文字--> <div class="right">></div><!--> エスケープ文字--> </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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: LinuxシステムでFuserコマンドを使用する方法
>>: MySQL 条件付きクエリと使用法および優先順位の例の分析
目次Vue3 カプセル化メッセージプロンプトインスタンス関数スタイルレイアウトカプセル化メッセージ....
1. マスタースレーブレプリケーションとは何ですか?マスター データベースの DDL および DML...
Django で Web プロジェクトを開発する場合、開発およびテストのプロセスでは Django ...
目次1. Linuxのビット数を確認する2. JDKをダウンロードする3. JDKをインストールする...
デフォルトでは、テーブルの境界線は 0 ですが、テーブルの境界線を設定できます。基本的な構文<...
目次背景探検する要約する背景テーブルでは、dataTime フィールドは varchar 型に設定さ...
<br />友人と話し合っていたとき、フレームワークのレイヤー設計の中で最も核となるのは...
目次背景1) yumのkeepchche機能を有効にする: 方法1 2) yum-utils ソフト...
目次tinymce、tinymce ts、tinymce-vue 宣言ファイルをインストールするパッ...
ネットワーク データを読み込むときは、ユーザー エクスペリエンスを向上させるために、通常は円形の読み...
最近仕事でnginxの設定を変更する必要が頻繁にあり、nginxでrewriteを使用する方法を学び...
目次el-scrollbar スクロールバーel-uploadはクリックをシミュレートしますel-s...
背景フレックス レイアウトにより、配置とスペースの割り当てがより効果的に実現されます。最近、flex...
HTML タグ: 上付き文字HTML では、<sup> タグは上付き文字のテキストを定義...
WeChat アプレットのスクロール ビューでは、プルアップして読み込むときにバグが多く発生します...