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 を応援していただければ幸いです。

以下もご興味があるかもしれません: