この記事の例では、マウス切り替え画像を実現するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 この効果を実現するには、対応する小さな点にマウスを移動するか、左右の矢印をクリックして画像を切り替えます。画像の上に画像のページ番号が表示され、下に対応する画像のタイトルが表示されます。 完全なコードは次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>画像スイッチ</title> <スタイル> 。写真 { 位置: 相対的; 幅: 500ピクセル; 高さ: 333px; マージン: 0 自動; 境界線: 2px実線rgb(231, 127, 217); オーバーフロー: 非表示; } .半径{ 幅: 100%; 高さ: 10px; 位置: 絶対; 下: 30px; テキスト配置: 中央; } .pg { //画像の上にページ番号を配置します。position: absolute; マージン: 0; 幅: 100%; 高さ: 20px; 背景色: rgba(0, 0, 0, .4); テキスト配置: 中央; フォントサイズ: 16px; フォントの太さ: 600; 色: #fff; } 。タイトル { 位置: 絶対; 幅: 100%; 下: 0px; テキスト配置: 中央; フォントサイズ: 16px; フォントの太さ: 600; 色: rgb(21, 223, 72); } スパン { 表示: インラインブロック; 境界線: 10px 実線 #fdfdfd; 境界線の半径: 50%; } 。アクティブ { 境界線: 10px 実線 #656466; } /* 左矢印と右矢印 */ .矢印左、 .矢印右 { 位置: 絶対; 幅: 41ピクセル; 高さ: 69px; フォントサイズ: 30px; 行の高さ: 70px; テキスト配置: 中央; 色: #D6D8D4; 背景色: rgba(0,0,0,.3); } .矢印左 { 左: 0; 上位: 40% } .矢印右 { 右: 0; 上位: 40% } </スタイル> </head> <本文> <div class="picture"> <!-- 画像ページ番号--> <p class="pg">表紙</p> <img src="./image/d8.jpeg" alt=""> <!-- 小さな点 --> <p class="radius"></p> <!-- 画像の下のタイトル --> <p class="title">タイトル</p> <!-- 左矢印と右矢印 --> <div class="arrowhead-left" id="al"> < </div> <div class="arrowhead-right" id="ar"> > </div> </div> <スクリプト> var address = ["./image/d1.jpeg", "./image/d2.jpeg", "./image/d3.jpeg", "./image/d4.jpeg", "./image/d5.jpeg", "./image/d7.jpeg"]; // var imgs = document.getElementsByTagName("img"); var imgs = document.querySelector("img"); var len = アドレス.長さ; var str = ""; var pp = document.getElementsByTagName("p"); //コレクションを取得する // var pp = document.querySelector("p"); //要素を取得する var al = document.getElementById("al"); var ar = document.getElementById("ar"); //spanタグを追加 for (i = 0; i < len; i++) { str += ' <span></span>' } コンソールログ(str); コンソールログ(pp); pp[1].innerHTML = str; var spans = pp[1].getElementsByTagName('span'); spans[0].className = 'アクティブ'; (i = 0; i < len; i++) の場合 { spans[i].index = i; spans[i].onmouseover = function () { //すべてのドットのクラスは空です for (i = 0; i < len; i++) { spans[i].className = ""; } this.className = 'active'; //クリックされたスパン(ドット)にクラス名を追加します。imgs.src = address[this.index]; pp[0].innerHTML = [this.index + 1] + "/6"; pp[2].innerHTML = "風景" + [this.index + 1]; } } var n = 0 ; ar.onclick = 関数(){ (i = 0; i < len; i++) の場合 { spans[i].className = ""; } spans[n].className = "アクティブ"; imgs.src = アドレス[n]; pp[0].innerHTML = (n+1) + "/6"; pp[2].innerHTML = "風景" +(n+1); (n<5)の場合{ n++; } それ以外 { 0 の場合 } } al.onclick = 関数(){ (i = 0; i < len; i++) の場合 { spans[i].className = ""; } spans[n].className = "アクティブ"; imgs.src = アドレス[n]; pp[0].innerHTML = (n+1) + "/6"; pp[2].innerHTML = "風景" +(n+1); (n>0)の場合{ n--; } それ以外 {} n=(長さ-1); } } </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: スケジュールされた時間に古いジャンクファイルを自動的に削除する Linux 用の Autotrash ツール
>>: MySQL 5.7.13 のインストールと設定方法のグラフィック チュートリアル (win10 64 ビット)
ハイパーリンク。「リンク」とも呼ばれます。ハイパーリンクは、私たちが閲覧する Web ページのいたる...
この記事では、例を使用して MySQL 正規表現 (regexp および rlike) の検索機能を...
Linux と Unix はマルチユーザー オペレーティング システムであるため、ファイルの権限と所...
1. フロントエンドエンジニアリングの複雑さいくつかの小さなデモ プログラムを開発するだけであれば、...
最近、「フロントエンドキャッシュ」という新しい要件が作成されました要件背景: フォームへの高頻度の繰...
データベース管理システムにおける同時実行制御のタスクは、データベース内の同じデータに同時にアクセスす...
ページにDOCTYPEを追加するブラウザによってタグやスタイルシートの解釈が異なるため、さまざまなブ...
昨日、パソコンにPHP開発環境をセットアップした後、Apacheサーバーを再起動するとエラーが続きま...
カーネル内の強力なツール cgroup は、NameSpace によって分離されたリソースを制限でき...
1 実施原則これは、DOM 要素の dragstart/ondragover/ondrop イベント...
目次序文背景大きな推測パターンを見つける構造とスタイルコンポーネントの実装パラメータキーボードの種類...
この記事では、Vueの具体的なコードを共有して、簡単なショッピングカートを実装します。具体的な内容は...
この記事では、CSS スクロールバー セレクターを紹介し、Webkit ブラウザーと IE ブラウザ...
1. 基本的な使い方これは MutationObserver コンストラクターを通じてインスタンス化...
<p><b>これは太字フォントです</b></p> ...