jQuery画像切り替えプラグイン jquery.cycle.js 使用例_jquery
May 16, 2016 pm 04:44 PM
jquery
映像切り替え
Cycle は、優れた jQuery 画像切り替えプラグインです。プラグインのスライドショー機能をより簡単に使用できるようにするための非常に優れた機能を提供します。
この時点で、Cycle プラグインをダウンロードしてインポートすることに注意してください。 jQuery メイン ファイルを導入した後、それを導入するコードに記述します。
コードをコピーします コードは次のとおりです。
<head>スクリプトタイプ= "text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery. cycle.all .js"></script>
<link href="style.css" rel="stylesheet" type="text/css" >
</head>
Cycle プラグインは、ページ内の兄弟要素の任意のグループに対して機能します。これを実証するには、単純な
HTML ドキュメントが必要です。このドキュメントは、HTML ドキュメントの本文に追加できる製品カバーと関連情報を含むリストです:
。 コードをコピー コードは次のとおりです。
<ul id="goods">
<li> 🎜><img src="img/lenovopad.jpg" alt="lenove パッド" />
<div class="title">Lenovo A3000(8GB/ホワイト)</div> ><div class="author">エンターテイメント タブレット、携帯電話タブレット
<li> " alt="note3" />
<div class="title">Samsung GALAXY Note III</div>
<div class="author">Samsung Note の第 3 世代製品シリーズ、5.7 インチのフル HD 眩しい画面 (Super AMOLED) を搭載、
解像度は 1080P (1920*1080 ピクセル)
🎜><img src="img/ipadair.png" alt="ipadair" />
<div class="title">iPad Air
<div> author">iPad Airは驚くほど薄くて軽いです。一連の改良により、iPad Air
のサイズは前世代の iPad に比べて 4 分の 1 近く縮小しましたが、手に取ってみると、依然として頑丈で耐久性があることがわかります。 </div>
</li>
CSS にいくつかのスタイルを追加すると、ページに表示されます
コードをコピーします
<li> 🎜><img src="img/lenovopad.jpg" alt="lenove パッド" />
<div class="title">Lenovo A3000(8GB/ホワイト)</div> ><div class="author">エンターテイメント タブレット、携帯電話タブレット
<li> " alt="note3" />
<div class="title">Samsung GALAXY Note III</div>
<div class="author">Samsung Note の第 3 世代製品シリーズ、5.7 インチのフル HD 眩しい画面 (Super AMOLED) を搭載、
解像度は 1080P (1920*1080 ピクセル)
<div class="title">iPad Air
<div> author">iPad Airは驚くほど薄くて軽いです。一連の改良により、iPad Air
のサイズは前世代の iPad に比べて 4 分の 1 近く縮小しましたが、手に取ってみると、依然として頑丈で耐久性があることがわかります。 </div>
</li>
CSS にいくつかのスタイルを追加すると、ページに表示されます
コードをコピーします
コードは次のとおりです。フォント: 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: その機能は特殊効果を選択することです。
ソースコードのダウンロード
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 などです。
timeout: 2000,
speed: 200,
pause: true
});
次の特別な内容が含まれますエフェクトはブラインド X、カバー、カーテン X、フェードズーム、グロウ X、スクロールアップ、シャッフル、スライド X などです。
ソースコードのダウンロード
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前
By DDD
レポ：チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前
By DDD
レポ：チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
ホットな記事タグ
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7281
9
7281
9
Java チュートリアル
1622
14
1622
14
CakePHP チュートリアル
1341
46
1341
46
Laravel チュートリアル
1258
25
1258
25
PHP チュートリアル
1205
29
1205
29
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?
Feb 28, 2024 pm 03:12 PM
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?
jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する
Feb 28, 2024 pm 09:06 PM
jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する
jQuery を使用してすべての a タグのテキスト コンテンツを変更する
Feb 28, 2024 pm 05:42 PM
jQuery を使用してすべての a タグのテキスト コンテンツを変更する
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?
Feb 29, 2024 am 09:03 AM
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?
