明日はどんなことして遊ぶ? デザイングループ「A.K.A and more」

WEB・DTPで活躍するデザイナーズグループ「A.K.A and more(エーケーエーアンドモア)」のブログです。アシタコンナコトシテアソブをテーマに、日々遊び心のあるデザインとコンテンツ制作を行っております。...Read More

jQuery TOOLSのタブスライドショーで特定箇所だけintervalを長くする

jquerytoolsのtab機能にはSlideshow pluginを追加できるが、スライドショーは一定間隔で変わっていくだけなので、最後だけちょっと表示を長くしたいという場合には次のように設定する。

HTML部分

CODE:
  1. <div id="slideshow">
  2. <ul class="slidetabs">
  3. <li><a href="#tab1">1</a></li>
  4. <li><a href="#tab2">2</a></li>
  5. <li><a href="#tab3">3</a></li>
  6. <li><a href="#tab4">4</a></li>
  7. <li><a href="#tab5">5</a></li>
  8. <li><a href="#tab6">6</a></li>
  9. <li><a href="#tab7">7</a></li>
  10. </ul>
  11. <div class="panes">
  12. <div><img src="item001.jpg" /></div>
  13. <div><img src="item002.jpg" /></div>
  14. <div><img src="item003.jpg" /></div>
  15. <div><img src="item004.jpg" /></div>
  16. <div><img src="item005.jpg" /></div>
  17. <div><img src="item006.jpg" /></div>
  18. <div><img src="item007.jpg" /></div>
  19. </div>
  20. </div>

Javascript部分

CODE:
  1. <script type="text/javascript">
  2. $(function() {
  3.     $(".slidetabs").tabs(".panes> div", {
  4.         tabs: "a",
  5.         effect: "fade",
  6.         rotate: true,
  7.         fadeInSpeed: "slow",
  8.         fadeOutSpeed: "slow",
  9.         onClick: function(event, tabIndex) {
  10.             var tabPanes = this.getPanes();
  11.             if(tabIndex == 6) tabPanes.delay(10000);
  12.       }
  13.     }).slideshow({
  14.         autoplay: true,
  15.         interval: 5000,
  16.         autopause: false,
  17.         clickable: false
  18.     });
  19. });
  20. </script>

重要なのは以下の部分で、

CODE:
  1. onClick: function(event, tabIndex) {
  2.     var tabPanes = this.getPanes();
  3.     if(tabIndex == 6) tabPanes.delay(10000);
  4. }

5秒ごとにスライドしていって、もし最後の画像(tabIndex == 6)だったら10秒待つという感じ。

jQuery TOOLSは導入が簡単な上、ある程度のカスタマイズも想定されているので、非常に楽。


Tag:, ,

ブックマーク: このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加ツイートツイート


関連するエントリー


この記事の投稿者

kr9

kr9 (12)

【ケーアールナイン】
WEBデザイン担当。
twitter:
http://twitter.com/akaandmore
ブックマーク:
http://b.hatena.ne.jp/kr9/

作成ツール一覧

【楽天アフィリエイト ランキングリンク作成支援ツール】

楽天ランキング上位30商品のアフィリエイトリンクを簡単に作成できます。

【Amazon アソシエイト (アフィリエイト) 短縮URL作成ツール】

Amazon(アマゾン)のアフィリエイトリンクが長すぎてコーディングが大変なので、短いアドレスに変換できるツールを作成しました。

【TwiAll(ツイオール) - Twitterの自動フォロー・フォロー返しを一括管理】

Twitter APIを利用したツイッターの整理・管理プログラム。質の高いフォロワーを増やしたいすべての方に。

【Twicolor(ツイカラー)- ツイッターの背景画像・カラー変更ツール】

ツイッターの着せ替えツール。誰でも簡単にデザインを変更することができます。

おすすめ

デザイナーのための著作権ガイド

デザイナーのための著作権ガイド
著作権についてとてもわかりやすく書いてあります。

レンタルサーバー Xserver


このブログのサーバです。マルチドメイン、サブドメイン、メールアドレス、FTPアカウント、全て無制限!