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に追加ツイートツイート


関連するエントリー


■コメント

5 コメント

  1. cs go skins net says:

    {

  2. locald.us says:

    Such ann adjustment would need persons carrying out
    tree extraction for hire to meet the requirements off TE
    licensing, including qualification, assessment,
    licensing, and just evidence of insurance coverage.

  3. suede handbag says:

    Councilors agreed to look at TLT percentages and how they are used, but voted in this case to accept the money for the equipment replacement.

  4. occhiali da sole alviero martini says:

    We conclude by hoping that the scene mentioned is the worst instance of prejudiced imagery the game has to offer, as “Resident Evil 5 deserves to be remembered for more than the unpleasantly black and white Africa it occasionally paints.”Then Crashes Car In Front Of Home

  5. women’s LiftKits says:

    I blog often and I seriously thank you for your content.

    Your article has truly peaked my interest. I will take
    a note of your blog and keep checking for new details about once a week.
    I opted in for your RSS feed as well.

■コメントを書く

コメントを書く


この記事の投稿者

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アカウント、全て無制限!