jCarouselでカルーセルスライダーを作ったのですが、スライダーを自動でスライドさせ続けたいという要望があり、簡単に実現できたのでメモしておきます。
参照 jCarousel（sorgalla.com）
このプラグインって、本当に自動スライド機能がないのかな？
スポンサーリンク
スライドボタンを一定の時間で押し続ける
要するにスライダーのボタンを押し続ければ実現できます。
その処理は以下。
<script type="text/javascript">
setTimeout(function() {
$(".jcarousel-skin-tango .jcarousel-next-horizontal").click();
setTimeout(arguments.callee, 8000);
},8000);
</script>とても簡単ですね。
カルーセルスライダーだけでなく、等間隔でイベントを発生させる際には便利です。
arguments.callee
arguments.calleeプロパティには呼び出された関数そのものが入っています。
これを応用すれば様々なループ処理を実現できそうですね。
setIntervalの方が処理を中断できるので便利
しかし、上記の方法では例外処理を入れたくても、出来ないのが不便です。
そこで、setIntervalを使ってみます。
$(function(){
var timerID = setInterval(click_sw, 6000);
// マウスオーバーで中断
$(".banner_section").hover(function(){
clearInterval(timerID);
}, function(){
timerID = setInterval(click_sw, 6000);
});
function click_sw(){
$(".jcarousel-skin-tango .jcarousel-next-horizontal").click();
}
});上記の例ではカルーセルのバナーセクションにマウスが乗ったときに自動スライドをストップしています。
マウスオフした際にスライド処理を再スタートします。
これで、バナーを押したいのにスライドしてしまうようなことがなくなりました。
単純なことですが、よく使う処理なので、覚えておいて損はないです。
では、このへんで。
by T.Y.
