jQueryを使って画像カルーセルを作成する方法

coldplay.xixi
リリース: 2020-11-30 14:33:23
オリジナル
3529 人が閲覧しました

jquery を使用して画像カルーセルを実行する方法: 最初に jquery スクリプト ファイルを導入し、次に lightSlider スクリプト ファイルを導入し、js スクリプトの ul タグの ID を渡して lightSlider メソッドを呼び出し、最後に実行します。ページ。

jQueryを使って画像カルーセルを作成する方法

このチュートリアルの動作環境: Windows7 システム、jquery3.5.1 バージョン この方法は、すべてのブランドのコンピューターに適しています。

jquery を使用して画像カルーセルを行う方法:

1. Jquery には多くの強力なプラグインがあり、もちろん画像カルーセル用のプラグインもあります。 Baidu で「lightslider」を検索し、プラグイン コードを再度ダウンロードします。

jQueryを使って画像カルーセルを作成する方法

#2. 次に、画像カルーセルを実装します。もちろん、最初に jquery スクリプト ファイルを導入する必要があります。

jQueryを使って画像カルーセルを作成する方法

#3. 次に、lightslider のスクリプト ファイルを導入しますが、対応するスタイル ファイルも必要です。

jQueryを使って画像カルーセルを作成する方法

4. HTML 部分は非常に単純で、ul または li タグが 1 つだけです。li には data-thumb## があることに注意してください。 # 属性、属性値は画像のパスです。

jQueryを使って画像カルーセルを作成する方法

5. js スクリプトで、ul タグの ID を渡して lightSlider メソッドを呼び出し、インスタンスを初期化します。内部のパラメータについてはドキュメントを参照してください。

jQueryを使って画像カルーセルを作成する方法

#6. ページを実行すると、美しい画像カルーセル プラグインが表示されます。

jQueryを使って画像カルーセルを作成する方法

#7. 自動再生に加え、下の画像をクリックすると大きな画像で画像が表示されます。

jQueryを使って画像カルーセルを作成する方法

関連する無料学習の推奨事項:

JavaScript (ビデオ)

以上がjQueryを使って画像カルーセルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート