ホームページ ウェブフロントエンド jsチュートリアル JS は小さな画像をクリックして、それに関連付けられた大きな画像を表示します

JS は小さな画像をクリックして、それに関連付けられた大きな画像を表示します

Apr 25, 2018 pm 05:53 PM
javascript 協会 見せる

今回は、JSが小さな写真をクリックすると大きな写真が連動して表示される場合と、JSが小さな写真をクリックすると大きな写真が連動して表示される場合の

注意事項

を紹介します。実際のケースを見てみましょう。

オンライン プレビュー ソース コードのダウンロード

html コード:

<center><p style="color:#334960">点击图标进行展示</p></center>
 <p class="main">
  <p id="coolShow"></p>
  <p id="handBar"></p>
 </p>
 <script type="text/javascript">
  /*定义需要展示的图片以及图片的展示时间*/
  $(document).ready(function () {
   $('#coolShow').coolShow({
    imgSrc: ['images/1.png', 'images/2.png', 'images/3.png'],
    speed: 40
   });
  });
 </script>
ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHP中国語ウェブサイトです!

推奨読書:

jQueryは、広告コンテンツのフェードインおよびフェードアウト効果を実現します


jQueryは、Alipayホームページのフォーカス画像効果を模倣します

🎜🎜

以上がJS は小さな画像をクリックして、それに関連付けられた大きな画像を表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

デスクトップレイアウトがロックされる理由と解決策 デスクトップレイアウトがロックされる理由と解決策 Feb 19, 2024 pm 06:08 PM

デスクトップ レイアウトがロックされるとどうなりますか? コンピューターを使用しているときに、デスクトップ レイアウトがロックされる状況に遭遇することがあります。この問題は、デスクトップアイコンの位置を自由に調整したり、デスクトップの背景を変更したりすることができないことを意味します。では、デスクトップ レイアウトがロックされていると表示される場合、具体的には何が起こっているのでしょうか? 1. デスクトップ レイアウトとロック機能を理解する まず、デスクトップ レイアウトとデスクトップ ロックの 2 つの概念を理解する必要があります。デスクトップ レイアウトとは、ショートカット、フォルダー、ウィジェットなど、デスクトップ上のさまざまな要素の配置を指します。私たちは自由になれる

リモートデスクトップ接続で相手のタスクバーを表示させる方法 リモートデスクトップ接続で相手のタスクバーを表示させる方法 Jan 03, 2024 pm 12:49 PM

リモートデスクトップ接続を利用しているユーザーは多いですが、利用中に相手のタスクバーが表示されないなどのちょっとしたトラブルに遭遇する人も多いと思いますが、実は相手の設定の問題である可能性が高いです。以下の解決策。リモートデスクトップ接続時に相手のタスクバーを表示する方法: 1. まず「設定」をクリックします。 2. 次に「個人用設定」を開きます。 3. 次に、左側の「タスクバー」を選択します。 4. 画像の「タスクバーを非表示にする」オプションをオフにします。

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

Wi-Fi パスワードの QR コードを表示するにはどうすればよいですか? WeChat で Wi-Fi パスワードを 3 秒以内にスキャンすることをお勧めします。 Wi-Fi パスワードの QR コードを表示するにはどうすればよいですか? WeChat で Wi-Fi パスワードを 3 秒以内にスキャンすることをお勧めします。 Feb 20, 2024 pm 01:42 PM

WIFI のパスワードは頻繁に入力する必要はないので忘れてしまうのが普通ですが、今日は自分の WIFI のパスワードを見つける最も簡単な方法を 3 秒で教えます。 WIFI パスワードを確認するには、WeChat を使用してスキャンしますが、この方法の前提条件は、WIFI に接続できる携帯電話が必要であることです。はい、チュートリアルを始めましょう: ステップ 1. 電話機を入力し、電話機の上部からプルダウンし、ステータス バーと WIFI アイコンを表示します。 ステップ 2. WIFI アイコンを長押しして、WLAN 設定に入ります。 WIFI アイコンを押します ステップ 3. 「接続済み」をクリックします 自宅の WIFI 名を入力し、パスワードの共有をクリックすると、QR コードがポップアップ表示されます; WIFI パスワードを共有するステップ 4、スクリーンショットを撮り、この QR コードを保存します; ステップ 5 、デスクトップ上の WeChat アイコンを長押しし、[スキャン] をクリックします。

Linux で現在のディレクトリを確認するにはどうすればよいですか? Linux で現在のディレクトリを確認するにはどうすればよいですか? Feb 23, 2024 pm 05:54 PM

Linux システムでは、pwd コマンドを使用して現在のパスを表示できます。 pwd コマンドは PrintWorkingDirectory の略で、現在の作業ディレクトリのパスを表示するために使用されます。ターミナルに次のコマンドを入力して、現在のパスを表示します。 pwd このコマンドを実行すると、ターミナルには現在の作業ディレクトリのフル パス (/home/user/Documents など) が表示されます。さらに、他のオプションを使用して pwd コマンドの機能を拡張することもできます。たとえば、-P オプションを使用すると、次のように表示できます。

サムスンはマイクロソフトの MR ヘッドセットにディスプレイを提供する予定で、デバイスはより軽量でより鮮明なディスプレイを備えていることが期待されています サムスンはマイクロソフトの MR ヘッドセットにディスプレイを提供する予定で、デバイスはより軽量でより鮮明なディスプレイを備えていることが期待されています Aug 10, 2024 pm 09:45 PM

最近、Samsung Display と Microsoft は重要な協力協定を締結しました。合意によると、Samsung Displayは、ゲームや映画などのマルチメディアコンテンツ向けのMRデバイスを開発しているMicrosoftに、数十万枚の複合現実(MR)ヘッドマウントデバイス用のOLEDoSパネルを開発、供給する予定だ。 OLEDoSの仕様決定後に発売され、主に商用分野向けに提供され、早ければ2026年にも提供される予定だ。 OLEDoS (OLED on Silicon) 技術 OLEDoS は、シリコン基板上に OLED を蒸着する新しいディスプレイ技術であり、従来のガラス基板と比較して、より薄く、より高い画素数を実現します。 OLEDOS表示と通常表示

win7が正常にシャットダウンできず、シャットダウン中と表示され続ける win7が正常にシャットダウンできず、シャットダウン中と表示され続ける Jan 06, 2024 pm 07:41 PM

win7 システムは、ほとんどのコンピュータ ユーザーに好まれている優れたシステムです。しかし、最近、多くの win7 システム ユーザーが、コンピューターをシャットダウンできず、シャットダウン中と表示され続けると報告しています。今日は、Win7 がシャットダウンできない問題の解決策をエディターが紹介します。見てみましょう。 Windows 7 がシャットダウンできず、シャットダウン中と表示され続ける問題の解決策: さまざまな原因と解決策: 方法 1: 1. まず、閉じていないソフトウェアがあるかどうかを確認し、あれば終了してからシャットダウンしてみます。 2. シャットダウン コマンドをクリックした後も問題が解決されません。コンピュータをシャットダウンできない場合は、コンピュータ内のプロセスの干渉が原因である可能性があります。タスク バーでマウスを右クリックし、[タスク マネージャ] をクリックします。 」を選択し、「プロセス」を選択します。 3. プロセス中にコンピューター上で実行されているすべてのものを観察できます。

全角文字と半角文字の違いは何ですか? 全角文字と半角文字の違いは何ですか? Mar 25, 2024 pm 03:54 PM

全角文字と半角文字の違いは何ですか?私たちは日常生活の中で、特に入力方法、植字、印刷など、この 2 つの文字を使用する場面で、全角文字と半角文字という 2 つの概念に遭遇することがよくあります。では、全角文字と半角文字の違いは何でしょうか?この問題については以下で議論しましょう。まず、全角文字と半角文字は、もともと中国語のタイプライターによって導入された概念です。いわゆる半角文字とは、文字の幅の半分を占める文字で、通常は英語文字とアラビア数字を指します。全角文字が占有

See all articles