Clever Geek Handbook

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



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





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



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



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




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

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




初期化：

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


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



構成



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



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

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




ダウンロードする



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


More articles:


All Articles