js はマウスによる画像の切り替えを実装します (タイマーなし)

js はマウスによる画像の切り替えを実装します (タイマーなし)

この記事の例では、マウス切り替え画像を実現するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 期間限定フラッシュセール機能を実現するJavaScriptタイマー
  • js で 0ms 遅延タイマーを実装するいくつかの方法
  • 画像のシームレスなスクロールを実現する JavaScript タイマー
  • JSタイマーを使用して要素を移動する
  • jsタイマーの最初の遅延の原因と解決策
  • js で setInterval クリアタイマーが機能しない問題を解決する
  • JS タイマーを使用して送信の成功を促す方法
  • JavaScript タイマーの詳細

<<:  スケジュールされた時間に古いジャンクファイルを自動的に削除する Linux 用の Autotrash ツール

>>:  MySQL 5.7.13 のインストールと設定方法のグラフィック チュートリアル (win10 64 ビット)

推薦する

win2008 で mysql8.0.11 を mysql8.0.17 にアップグレードする詳細な手順

アップグレードの背景: MySQLの下位バージョンの脆弱性を解決するために、MySQLはMySQL ...

鏡像効果を実現する JavaScript キャンバス

この記事では、JavaScriptキャンバスでミラーイメージ効果を実現するための具体的なコードを参考...

Docker用国産イメージウェアハウスの使い方

1. 問題の説明何らかの理由により、中国でのDockerイメージのダウンロード速度は特に遅くなります...

mysql5.7 以降で my.ini を設定するための詳細な手順

Windows 64 ビット版 MySQL 5.7 以降の解凍パッケージにデータディレクトリ、my-...

Linuxの貼り付けコマンドの使い方

01. コマンドの概要貼り付けコマンドは各ファイルを列ごとに結合します。これは、2 つの異なるファイ...

MySQLトランザクションの基本的な学習と経験の共有

トランザクションは、論理的な操作のグループです。この操作グループを構成する各ユニットは、成功するか失...

MySQL InnoDB ストレージエンジンのメモリ管理の詳細な説明

目次ストレージエンジンのメモリ管理データ ページを LRU キューの先頭に置かないのはなぜですか?ダ...

CentOS7 カーネル カーネル5.0 バージョンアップグレード

アップグレードプロセス:元のシステム: CentOS7.3 [root@my-e450 ~]# un...

Vueはアコーディオン効果を実装する

この記事の例では、アコーディオン効果を実現するためのVueの具体的なコードを参考までに共有しています...

初心者向け入門チュートリアル④:サブディレクトリのバインド方法

これが何を意味するのかを理解するには、まずサブディレクトリとは何かを知る必要があります。では、サブデ...

JavaScript はマウスのドラッグを実装して div のサイズを調整します

この記事では、マウスをドラッグしてdivのサイズを調整するJavaScriptの具体的なコードを参考...

Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)

1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...

一般的なイベントを処理するための JavaScript の使用に関する詳細な説明

目次1. フォームイベント2. マウスイベント3. キーボードイベント4. 共通イベントメソッド(ウ...

CSS 配置レイアウト (位置、配置レイアウト スキル)

1. ポジショニングとは何ですか? CSS の position 属性には、absolute/re...