jQuery TOOLSのタブスライドショーで特定箇所だけintervalを長くする
jquerytoolsのtab機能にはSlideshow pluginを追加できるが、スライドショーは一定間隔で変わっていくだけなので、最後だけちょっと表示を長くしたいという場合には次のように設定する。
HTML部分
CODE:
-
<div id="slideshow">
-
<ul class="slidetabs">
-
<li><a href="#tab1">1</a></li>
-
<li><a href="#tab2">2</a></li>
-
<li><a href="#tab3">3</a></li>
-
<li><a href="#tab4">4</a></li>
-
<li><a href="#tab5">5</a></li>
-
<li><a href="#tab6">6</a></li>
-
<li><a href="#tab7">7</a></li>
-
</ul>
-
<div class="panes">
-
<div><img src="item001.jpg" /></div>
-
<div><img src="item002.jpg" /></div>
-
<div><img src="item003.jpg" /></div>
-
<div><img src="item004.jpg" /></div>
-
<div><img src="item005.jpg" /></div>
-
<div><img src="item006.jpg" /></div>
-
<div><img src="item007.jpg" /></div>
-
</div>
-
</div>
Javascript部分
CODE:
-
<script type="text/javascript">
-
$(function() {
-
$(".slidetabs").tabs(".panes> div", {
-
tabs: "a",
-
effect: "fade",
-
rotate: true,
-
fadeInSpeed: "slow",
-
fadeOutSpeed: "slow",
-
onClick: function(event, tabIndex) {
-
var tabPanes = this.getPanes();
-
if(tabIndex == 6) tabPanes.delay(10000);
-
}
-
}).slideshow({
-
autoplay: true,
-
interval: 5000,
-
autopause: false,
-
clickable: false
-
});
-
});
-
</script>
重要なのは以下の部分で、
CODE:
-
onClick: function(event, tabIndex) {
-
var tabPanes = this.getPanes();
-
if(tabIndex == 6) tabPanes.delay(10000);
-
}
5秒ごとにスライドしていって、もし最後の画像(tabIndex == 6)だったら10秒待つという感じ。
jQuery TOOLSは導入が簡単な上、ある程度のカスタマイズも想定されているので、非常に楽。