jQuery画像切り替えプラグイン jquery.cycle.js 使用例_jquery

Cycle は、優れた jQuery 画像切り替えプラグインです。プラグインのスライドショー機能をより簡単に使用できるようにするための非常に優れた機能を提供します。

この時点で、Cycle プラグインをダウンロードしてインポートすることに注意してください。 jQuery メイン ファイルを導入した後、それを導入するコードに記述します。

コードをコピーします コードは次のとおりです。

スクリプトタイプ= "text/javascript" src="js/jquery-1.8.0.min.js">

jquery.cycle.all.js はデモ コードにあります。

Cycle プラグインは、ページ内の兄弟要素の任意のグループに対して機能します。これを実証するには、単純な

HTML ドキュメントが必要です。このドキュメントは、HTML ドキュメントの本文に追加できる製品カバーと関連情報を含むリストです:

。 コードをコピー コードは次のとおりです。

• 🎜>
  
  Lenovo A3000(8GB/ホワイト)
  >
  エンターテイメント タブレット、携帯電話タブレット
  
• " alt="note3" />
  
  Samsung GALAXY Note III
  
  
  Samsung Note の第 3 世代製品シリーズ、5.7 インチのフル HD 眩しい画面 (Super AMOLED) を搭載、
  解像度は 1080P (1920*1080 ピクセル)
  
  
• 🎜>
  
  iPad Air
  

  author">iPad Airは驚くほど薄くて軽いです。一連の改良により、iPad Air
  のサイズは前世代の iPad に比べて 4 分の 1 近く縮小しましたが、手に取ってみると、依然として頑丈で耐久性があることがわかります。

  
  



CSS にいくつかのスタイルを追加すると、ページに表示されます




コードをコピーします

コードは次のとおりです。

html, body { margin: 0; 0 ; } ボディ {

フォント: 62.5% Verdana、Helvetica、Sans-serif;

背景: #fff; }

ul#goods {
リストスタイル: なし;
パディング: 0;
高さ: 210px;
> オーバーフロー: 非表示;
ul#goods li {
マージン: 0;
高さ: 210px;幅 : 500px;
位置: 相対;
ul#goods li img {
左: 0; > トップ: 0;
高さ: 210px;
ul#goods li .title {
余白: 300px; 🎜 >幅: 180px;
フォントサイズ: 1.2em;
色: #fff;
}
ul#goods li .author {
余白: 300px;
幅: 180px;
フォントの太さ: 太字🎜 >background-color: #F79321;
color: #fff;


このリストは、Cycle プラグインを使用してインタラクティブなスライドショーに変換できます。この変換は、DOM 内の適切なコンテナで .cycle() メソッドを呼び出すことで実行できます。




コードをコピー


コードは次のとおりです。


$(document).ready(function( ) {
$('#goods').cycle()
});
この構文はこれ以上に単純です。他の組み込み jQuery メソッドを使用する前と同様に、DOM 要素を含む jQuery オブジェクトに対して

.cycle() も呼び出しました。パラメータが指定されていない場合でも、.cycle() は変換作業を完了するのに役立ちます。これには、図に示すように、一度に 1 つのリスト項目のみが表示されるようにページのスタイル

を変更し、4 秒ごとにクロスフェードで次のリスト項目に切り替えることが含まれます。

プラグイン メソッドのパラメータを指定する

Cycle() メソッドは多くのパラメータを提供します。各パラメータの具体的な機能については、ここでは 1 つずつ説明しません。他のドキュメントを確認してください

us Cycle プラグインの 2 つのスライド間の再生速度やアニメーション形式を変更したり、スライド切り替えのトリガー方法を変更したりできます。

コードをコピー コードは次のとおりです。

$(document).ready(function( ) {
$('#goods').cycle({
タイムアウト: 2000,
速度: 200,
一時停止: true
}); >

最初のタイムアウト オプションは、スライドの切り替えの間に待機するミリ秒数 (2000) を指定するために使用され、速度によってスライド自体の切り替えにかかるミリ秒数 (200) が決まります。

一時停止を true に設定すると、マウスが入力されるとスライドショーが一時停止します。これは、スライドショーにクリック可能なリンクが含まれている場合に非常に便利です。

Cycle には非常に重要なパラメータがあります: fx: その機能は特殊効果を選択することです。

コードをコピー コードは次のとおりです:

$('#goods').cycle ({

fx:'fade',
timeout: 2000,
speed: 200,
pause: true
});


次の特別な内容が含まれますエフェクトはブラインド X、カバー、カーテン X、フェードズーム、グロウ X、スクロールアップ、シャッフル、スライド X などです。

ソースコードのダウンロード