🗡️ 👩‍👦‍👦 🔎 （a）スライドショー-jQueryスライドショープラグイン 👨🏽‍🏫 👭 👩🏼‍🍳

私はjQueryプラグインの作成を練習することにし、今では最初のプラグインを公開しています...

このプラグインを使用すると、DOM要素のミニプレゼンテーションを整理できます。使いやすく、便利な場合があります。まあ、言葉から行動まで。

まず、スライドショーのコンテンツが必要です。タグ<p>、<img>、<div>などが適切です。

< div id = "MySlideshow" > <！-スライドショーのラッパー->
< p >スライド1上の一部のテキスト... / p >
< img src = "img / image_0.jpg" alt = "スライド番号2です" / >
< img src = "img / image_1.jpg" alt = "スライド番号3です" / >
< p > < label >タイトル< / label >スライド4の一部のテキスト... < / p >
< img src = "img / image_2.jpg" alt = "スライド番号5です" / >
< / div >

JavaScript（jqueryとプラグイン）とスタイルシートを接続します：

< link href = "js / jquery.aslideshow / simple / styles.css" media = "screen" rel = "stylesheet" type = "text / css" / >
< スクリプトタイプ = "text / javascript" src = "js / jquery.js？ver = 1.2.6" > < / / script >
< スクリプトタイプ = "text / javascript" src = "js / jquery.aslideshow.js" > < / script >

初期化：

< スクリプトタイプ = "text / javascript" >
$（ドキュメント）.ready（関数（）{
$（ '＃MySlideshow'）。スライドショー（）;
}）;
< / スクリプト >

プロジェクトのホームページで見ることができる結果はどうなります ;）

構成

写真の「alt」属性は、スライドのタイトル、または残りのスライドの最初の「label」タグとして使用されます...

プラグインには多くの設定もあります。

$ （ '#CustmSlideshow' ）。スライドショー（ {
width ： 320 、 //ピクセル単位の幅
height ： 240 、 //ピクセル単位の幅
index ： 0 、 //スライド番号Nから開始
コンテンツ： {
'nextclick' ： false 、 //メインウィンドウをクリックして次のスライドに切り替えます
'playclick' ： false 、 //メインウィンドウをクリックしてスライドショーの再生を有効/無効にする
'playframe' ： true 、 //最初に「Play Now！」スライドを表示します
'imgresize' ： false 、 //スライドショーのサイズに合わせて画像のサイズを変更します
'imgcenter' ： true //画像を中央に配置します（まだ機能しません）
} 、
controls ： { //コントロール
'hide' ： true 、 //ポップアップツールバー
'first' ： true 、 //ボタンの最初のスライド
'prev' ： true 、 //前のスライドのボタン（これが最初の場合、最後のスライドに移動します）
'play' ： true 、 //スライドショーを開始
'next' ： true 、 //次のスライドのボタン（これが最後の場合、最初のスライドに移動）
'last' ： true 、 //最後のスライドボタン
'help' ： true 、 //ヘルプ行表示ボタン
'counter' ： true //現在のスライド番号を表示
} 、
スライドショー： {
'time' ： 3000 、 //スライド変更間の遅延
'title' ： true 、 //タイトルを表示するかどうか
'panel' ： true 、 //コントロールパネルを表示するかどうか
'help' ：「Hello World！」 //行テキストのヘルプ
}
} ） ;

ダウンロードする

SVNへのアクセスを使用して、このプラグインをダウンロードできます。

svn checkout http： // a-slideshow.googlecode.com / svn / trunk / a-slideshow-read-only

またはアーカイブ内：

http://code.google.com/p/a-slideshow/downloads/list
http://plugins.jquery.com/project/a-slideshow

（a）スライドショー-jQueryスライドショープラグイン

構成

ダウンロードする

More articles: