jQueryのsetIntervalで等間隔時間のループ処理(処理を中断しやすいのが便利なところ)

7470099756_57b109a771_b
photo credit: IMG_2057.JPG via photopin cc

ハイ! リサです。

前回、arguments.calleeを使って繰り返し処理を行う記事を書きましたが、とても使い勝手が悪かったので、jQueryのsetIntervalを使うように変更しました。
こちらの方が何かと便利です。

過去記事カルーセルスライダー(jcarousel)を等間隔の時間でスライドさせ続けるjQuery

マウスオーバーでスライド処理を抑制します。

コードは以下。


$(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();
}
});

上記の例ではカルーセルのバナーセクションにマウスが乗ったときに自動スライドをストップしています。

マウスオフした際にスライド処理を再スタートします。

これで、バナーを押したいのにスライドしてしまうようなことがなくなりました。

単純なことですが、よく使う処理なので、おぼえておいて損はないです。

では、このへんで。

See you !

© oh yeah Steve!

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする

スポンサーリンク
スポンサーリンク