丸いボタン(よくあるやつ)で移動出来るスライダーが有り、複数動かしています。基本は自動スライド(setInterval)で、丸いボタンクリックすると一度スライド停止(clearInterval)させています。その停止処理がうまく行きません
具体的には、最初のスライダーの丸いボタンをクリックすると、次のスライダーが停止します。
clearIntervalを複数回回すような処理が必要になるのでしょうか?
自動スライドはどちらも正常稼働中です。
複数ってことはsetIntervalのオブジェクトが被ってる可能性あるね。
どんな風に書いてるのかわからん。仮に
$(function(){ timer = setInterval(function(){ $(’#slide1 .main’).animate({ 〜 }); }); $(’#slide1 .indicator’).click(function(){ clearInterval(timer); }); timer = setInterval(function(){ $(’#slide2 .main’).animate({ 〜 }); }); $(’#slide2 .indicator’).click(function(){ clearInterval(timer); });});
のように書いてるとしたら、timer(setIntervalの戻り値を格納する変数)が2つ目のtimerで上書きされちゃう。変数名をそれぞれ変える(上記の例で言えばtime1,time2にする)か、それぞれのコードを(function(){ 〜 })();で括って、更に変数宣言時にvarをつけるようにすれば、スコープが別になって同じ名前でも大丈夫なようになる。(そもそも上記の例はとっても冗長なので、できれば書きなおしたほうがいいけど)
この辺読んで勉強すると良いかもttps://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Values,_variables,_and_literals
typo× time1, time2○ timer1, timer2
//どうでもいいけどw3qに綺麗にインデントして回答できる機能がほしい
みんなの回答 2 件
複数ってことはsetIntervalのオブジェクトが被ってる可能性あるね。
どんな風に書いてるのかわからん。
仮に
$(function(){
timer = setInterval(function(){
$(’#slide1 .main’).animate({ 〜 });
});
$(’#slide1 .indicator’).click(function(){
clearInterval(timer);
});
timer = setInterval(function(){
$(’#slide2 .main’).animate({ 〜 });
});
$(’#slide2 .indicator’).click(function(){
clearInterval(timer);
});
});
のように書いてるとしたら、timer(setIntervalの戻り値を格納する変数)が2つ目のtimerで上書きされちゃう。
変数名をそれぞれ変える(上記の例で言えばtime1,time2にする)か、
それぞれのコードを
(function(){ 〜 })();
で括って、更に変数宣言時にvarをつけるようにすれば、スコープが別になって同じ名前でも大丈夫なようになる。
(そもそも上記の例はとっても冗長なので、できれば書きなおしたほうがいいけど)
この辺読んで勉強すると良いかも
ttps://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Values,_variables,_and_literals
関連するトピックス