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 ビット)

推薦する

XHTML でのハイパーリンク タグの使用に関するチュートリアル

ハイパーリンク。「リンク」とも呼ばれます。ハイパーリンクは、私たちが閲覧する Web ページのいたる...

MySQL 正規表現 (regexp と rlike) の検索機能の例分析

この記事では、例を使用して MySQL 正規表現 (regexp および rlike) の検索機能を...

Linux でファイルの権限 (所有権) を変更する

Linux と Unix はマルチユーザー オペレーティング システムであるため、ファイルの権限と所...

React スキャフォールディングの構築方法を学ぶ

1. フロントエンドエンジニアリングの複雑さいくつかの小さなデモ プログラムを開発するだけであれば、...

Vueのキャッシュ方法の例の詳細な説明

最近、「フロントエンドキャッシュ」という新しい要件が作成されました要件背景: フォームへの高頻度の繰...

MySQL における楽観的ロックと悲観的ロックの例

データベース管理システムにおける同時実行制御のタスクは、データベース内の同じデータに同時にアクセスす...

クロスブラウザ開発体験のまとめ(I)HTMLタグ

ページにDOCTYPEを追加するブラウザによってタグやスタイルシートの解釈が異なるため、さまざまなブ...

Win7 で IIS7 Web および FTP サービスを完全にアンインストールする方法

昨日、パソコンにPHP開発環境をセットアップした後、Apacheサーバーを再起動するとエラーが続きま...

Dockerの核となる原則であるCgroupの詳細な説明

カーネル内の強力なツール cgroup は、NameSpace によって分離されたリソースを制限でき...

JavaScript を使用して div の位置をドラッグして入れ替える例

1 実施原則これは、DOM 要素の dragstart/ondragover/ondrop イベント...

WeChatアプレットにナンバープレート入力機能を実装

目次序文背景大きな推測パターンを見つける構造とスタイルコンポーネントの実装パラメータキーボードの種類...

Vueはシンプルなショッピングカートの例を実装します

この記事では、Vueの具体的なコードを共有して、簡単なショッピングカートを実装します。具体的な内容は...

CSSスクロールバーのスタイルをカスタマイズする方法の詳細な説明

この記事では、CSS スクロールバー セレクターを紹介し、Webkit ブラウザーと IE ブラウザ...

JavaScript で DOM 要素を監視する MutationObServer の詳細

1. 基本的な使い方これは MutationObserver コンストラクターを通じてインスタンス化...