Taobao の商品画像切り替え効果を実現する JavaScript

Taobao の商品画像切り替え効果を実現する JavaScript

JavaScriptの服装アルバム切り替え効果(Taobao商品画像切り替えに似ています)、参考までに、具体的な内容は次のとおりです。

では、早速コードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル タイプ="text/css">
        #bigImg{
            幅: 200ピクセル;
        }
        *{
            パディング: 0;
            マージン: 0;
        }
        ul{
            リストスタイル: なし;
            /*オーバーフロー: 非表示;*/
        }
        ul li{
            フロート: 左;
            幅: 46px;
            高さ: 46px;
            左マージン: 10px;
            上マージン: 20px;
            境界線: 2px 実線 #ffffff;
        }
        ul .アクティブ{
            境界線の色: 赤;
        }
    </スタイル>
</head>
<本文>
    <img src="img/cloth_01.jpg" id="bigImg">
    <ul>
        <li class="active">
            <a href="">
                <img src="img/cloth_01.jpg" width=46 class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/cloth_02.jpg" width=46 class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/cloth_03.jpg" width=46 class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/cloth_04.jpg" width=46 class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/cloth_05.jpg" width=46 class="smallImg">
            </a>
        </li>
    </ul>
    
    <!--JS 部分-->
    <script type="text/javascript">
        // 1. イベント ソースを取得します。 var bigImg = document.getElementById("bigImg");
        var smallImgs = document.getElementsByClassName("smallImg");

        (var i=0;i<smallImgs.length;i++){
            // 2. コレクションを走査し、各imgタグにイベントを追加します。smallImgs[i].onmouseover = function (){

                // 3. イベントハンドラ // 3.1 各liタグにホバーする前に、すべてのliタグのクラス名を空の値に設定します for (var j=0;j<smallImgs.length;j++){
                    smallImgs[j].parentNode.parentNode.setAttribute("class","");
                }

                // 3.2 大きな画像の src 属性値を変更します。var smallImgSrc = this.getAttribute("src");
                bigImg.setAttribute("src",smallImgSrc);
                // 3.3 マウスが置かれている img タグの親タグにクラスを追加します。this.parentNode.parentNode.setAttribute("class","active");

            }
        }
    </スクリプト>
</本文>
</html>

実装効果図:

デフォルトでは最初の画像が選択されます (大きな画像はデフォルトで最初の画像です)。マウスを対応する画像の上に置くと、大きな画像がその画像に切り替わります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Videojs+swiper が Taobao の商品詳細カルーセルを実現
  • 商品画像拡大鏡を実現する JavaScript
  • JavaScriptはeコマースプラットフォームの製品詳細を実装します

<<:  Linux で MySQL に接続するときに発生するエラーを解決する方法: ユーザー 'root'@'localhost' へのアクセスが拒否されました (パスワードの使用: YES)

>>:  Docker Compose を使用して nginx のロード バランシングを実装する方法

推薦する

shtmlとhtmlの違い

Shtml と asp は似ています。shtml という名前のファイルでは、asp の命令と同様に、...

Windows Server 2016 標準キー アクティベーション キー シリアル番号

Windows Server 2016 アクティベーション キーを皆さんと共有したいと思います。wi...

MySQL トリガーの基本的な使い方(作成、表示、削除など)の詳細な説明

目次1. MySQLトリガーの作成: 1. MySQLトリガー作成構文: 2. MySQL作成構文の...

JS と Nodejs におけるイベント駆動型開発についての簡単な説明

目次イベント駆動型とパブリッシュ・サブスクライブ型ブラウザの JavaScript ではイベント駆動...

aタグ疑似クラスの機能と記述順序は何ですか?

a タグ疑似クラスの役割: 「:link」: 訪問されていないタグの状態。 「:visited」: ...

Nginx プロセス スケジューリングの問題の詳細な説明

Nginx は、マスター プロセス (MasterProcess) と、同じ数のホスト CPU コア...

Docker で SVN サーバーを構築するチュートリアル

SVN は Subversion の略称で、ブランチ管理システムを使用して効率的に管理するオープンソ...

js のマクロタスクとマイクロタスクについての簡単な説明

目次1. JavaScriptについて2. JavaScript イベントループ3. マクロタスクと...

httpsウェブサイトにリファラーhttpsとhttpジャンプリファラーを送信させる方法

この記事では、HTTP プロトコルのリファラーのメタデータ パラメータの提案について説明します。この...

体験したい17 404ページ

404 を避けるべきだとどうして言えるのでしょうか? その理由は、ほとんどの 404 ページが粗雑す...

JavaScript 戦略パターンを使用してフォームを検証する方法

目次概要戦略パターンを使用しないフォーム検証戦略パターンを使用して最適化する戦略パターンの利点要約す...

Vue3 テーブルコンポーネントの使用

目次1. Antデザインビュー1. 公式ウェブサイトアドレス2. 使い方3.電子書籍テーブルを表示す...

Vue3 がデータ監視を実装するためにプロキシを使用する理由の分析

Vue データの双方向バインディング原則ですが、この方法には欠点があり、配列とオブジェクトの部分的な...

MySQL の列から行への変換のヒント (共有)

序文:多くのビジネス テーブルでは、歴史的またはパフォーマンス上の理由により、最初のパラダイムに違反...

Vue コンポーネント化の一般的な方法: コンポーネント値の転送と通信

関連する知識ポイント親コンポーネントから子コンポーネントに値を渡す子コンポーネントから親コンポーネン...