この記事では、カルーセルマップの特殊効果を実現するための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 条件付きクエリと使用法および優先順位の例の分析
序文世界最高の Web サーバーの 1 つである Nginx の利点は明らかです。 Nginx がリ...
MySQL は、膨大なユーザーベースを持つ無料のリレーショナル データベースです。この記事では、My...
MySQL操作情報のクエリ show status -- すべての MySQL 操作情報を表示します...
この記事では、Jingdong虫眼鏡を模倣したJavaScriptの具体的なコードを参考までに共有し...
1. 前提条件インポートには require.context メソッドを使用します。vite で作成...
新しいCSS3プロパティと互換性ありCSS3では、プラグインprefixfree.min.jsを使用...
HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...
目次概要1. 関数デバウンス2. 機能スロットリング(スロットル)概要関数アンチシェイクと関数スロッ...
成果を達成する実装コードhtml <div>123WORDPRESS.COM</d...
削除する方法はいくつかあります:リンクを直接追加するonfocus="this.blur(...
著者: Guan Changlong は、Aikesheng の配送サービス部門の DBA です。主...
Jellyka Beesアンティーク手書き [ank]* ジェリーカ・カティカップケーキ LHF ジ...
目次序文分析するデータ合計繰り返し率どこにあるかと持っているかの違い要約する序文私はソフトウェアの導...
たとえば、昨日新規登録されたユーザーを照会するには、次の 2 つの書き方があります。 説明する ch...
なぜこのような効果を実現するのでしょうか。実は、この効果もタイトルプロンプトから派生したものですが、...