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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で MySQL に接続するときに発生するエラーを解決する方法: ユーザー 'root'@'localhost' へのアクセスが拒否されました (パスワードの使用: YES)
>>: Docker Compose を使用して nginx のロード バランシングを実装する方法
推薦する
Ubuntu に MySQL 5.7 をインストールし、データ ストレージ パスを構成する方法
1. MySQLをインストールするこの記事はAPT経由でインストールされており、インストールされてい...
Linux システムで .sh ファイルを実行する方法
Linux システムで .sh ファイルを実行する方法は 2 つあります。たとえば、ルート ディレク...
MySQLのロングトランザクションに関する深い理解
序文：この記事では主にMySQLのロングトランザクションに関する内容を紹介します。例えば、トランザク...
Linux の高並列性とパフォーマンス最適化の落とし穴の紹介
目次序文Linux アプリケーション実行中に開いているファイルが多すぎる問題の分析と解決Linux ...
WindowsにMySQL5.7圧縮パッケージを素早くインストールする
この記事では、Windows に MySQL 5.7 圧縮パッケージをインストールする方法について説...
CSS3でカルーセル画像を作成する方法
スライドショーは Web ページでよく見られます。美しい写真が使われています。こちらは純粋な CSS...
LinuxカーネルとSVNバージョン間の競合の解決策
現象システムは Linux システムカーネルを正常にコンパイルできましたが、SVN をインストールし...
NexusはHTTPSプロトコルをサポートするためにnginxプロキシを使用します
背景すべての会社の Web サイトは HTTPS プロトコルをサポートする必要があります。Aliba...
Vue+el-tableはセルの結合を実現します
この記事の例では、参考までにセルの結合を実現するためのel-tableの具体的なコードを共有していま...
MySQLデータベース入門：マルチインスタンス構成方法の詳しい説明
目次1. マルチインスタンスとは2. 複数インスタンスのインストールの準備3. MYSQLの複数イン...
MySQLアラームの詳細な分析と処理
最近、あるサービスにアラームが発生し、耐えられなくなっています。アラーム情報は次のとおりです。メトリ...
JavaScript を使用してテーブル情報を追加および削除する
JavaScript 入門JavaScript は軽量なインタープリタ型の Web 開発言語です。言...
MySQL で日付時刻データを取得し、その後に .0 を追加する方法
MySQL のデータ型は datetime です。データベースに保存されているデータは 2015-0...
MySQLサーバーが消えたエラーの解決策
PHP で MySQL サーバーが消えた問題1. 背景以前、Codeigniter でコンソール コ...
MySQL 5.7.21 winx64 無料インストールバージョン設定方法グラフィックチュートリアル
MySQL 5.7.21 winx64無料インストールバージョンの設定方法、参考までに、具体的な内容...