hwSlider コンテンツのスライド切り替え効果 (3): jquery.hwSlide.js プラグインのカプセル化

最初の 2 つのパートの説明を終えると、コンテンツのスライディング切り替えの基本的な開発アイデアとテクニックが大体わかりました。次の 3 番目のパートでは、最初の 2 つのパートのコードを最適化し、jQuery プラグインにカプセル化します。 .hwSlide.js。開発者は、さまざまな画像カルーセル効果、フォーカス画像効果、グラフィックとテキストの混合スライディング効果を簡単に作成できます。



デモを見る ソースコードをダウンロード

hwSliderには次の機能があります:

さまざまなプロジェクトのニーズを満たすための複数のパラメータのカスタマイズ。

モバイルデバイスでのタッチとスライドをサポートします。

画像とテキストの混合配置をサポートし、さまざまな HTML 要素をサポートします。

応答性が高く、画面サイズに適応します。

同じページで複数のスライド スイッチがサポートされています。

軽量で、圧縮バージョンは 4KB 未満です。

すべての最新ブラウザをサポートし、ie8+ をサポートします。

HTML

まず、ページの先頭にある hwSlider に必要な基本的な CSS スタイル ファイルを読み込みます。また、jquery ライブラリ ファイルと hwSlider プラグインももちろん、ページの下部にある js ファイルを読み込むことをお勧めします。ページ。

[code=html]
<link type="text/css"  rel="stylesheet" href="css/hwslider.css" />
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hwSlider.js"></script>

次に、次の HTML コードを本文に追加します。

[code=html]
<p class="hwslider">
	<ul>
		<li><img src="images/s1.jpg" alt=""></li>
		<li><img src="images/s2.jpg" alt=""></li>
		<li>hwSlider.js</li>
	</ul>
</p>

上記のコードに従って、HTML 構造をレイアウトします。各 li 要素には、スライダーのコンテンツを含めることができます。テキストやグラフィックなど。

jQuery

jQuery プラグイン開発テンプレートに従ってください。興味のある学生は、jQuery プラグイン テンプレートに関するこの記事を参照してください: jQuery ポップアップ レイヤー plug-in-hwLayer コードを jQuery プラグインにカプセル化しました。 -in: jquery.hwSlider .js、特定のコードを表示するには、ソース コードをダウンロードしてください。 Flexslider プラグインの呼び出しは非常に簡単です。次のコードを使用します。

[code=js]
$(function() { 
    $(".hwslider").hwSlider(); 
});

ページを実行して、スライダーの効果を確認します。 hwSlider はデフォルトで 600x320 のスライダー サイズを使用することに注意してください。オプションを設定することで、デフォルトのスライダーの初期サイズを変更できます。

hwSlider オプション設定

hwSlider は、開発者がニーズに応じて設定できるシンプルで実用的なオプション設定を提供します。

arrShowtouchafterSlider -->

パラメータ	説明	デフォルト値
高さ	スライダーの初期の高さ、数値、幅、および高さは、スライダー サイズの適応的なスケーリングを保証するために使用されます。	320
start	初期スライド位置、どの数値からスライドを開始するか、数値	1
speed	スライド速度、単位ms、数値	600
ヴァル	滑りやすいブロックスライド間隔時間、ユニットMS、番号true
左右の矢印ナビゲーションを表示するかどうか、Boolean true/false	tru​​e
タッチスライドをサポートするかどうか、Boolean true/false	tru​​e
コールバック関数、スライダーをスライドさせた後、この関数を呼び出します
上記は hwSlider コンテンツのスライド切り替え効果 (3) の内容です: jquery.hwSlide.js プラグイン パッケージ 詳細については、 、PHP 中国語 Web サイト (www.php.cn) に注意してください。