問題
setInternalを停止、再実行するには？
解決策
- setIntervalを格納しておくための変数を用意しておきます。
- setIntervalの処理を作ります。その一連の処理を関数に収めておきます。
- setIntervalを実行、再実行する際は関数を実行します。
- 停止する場合はclearIntervalで変数を指定します。
setInternalをコントロールする
javascriptで、setInternalを停止、再実行する方法をご紹介します。
DEMOはこちら
- ※自動でA～Eの要素が順番に点灯していきます。
- ※下のA～Eの要素にカーソルを合わせると、自動切り替えが停止し、合わせている要素が点灯します。
- A
- B
- C
- D
- E
現在選択されている要素の順番は1番目です。
HTML
<div class="switchtime-box">
<ul class="switchtime-list">
<li><span class="inner">A</span></li>
<li><span class="inner">B</span></li>
<li><span class="inner">C</span></li>
<li><span class="inner">D</span></li>
<li><span class="inner">E</span></li>
</ul>
<p class="text">現在選択されている要素の順番は<span class="numtext"></span>番目です。</p>
</div>CSS
.switchtime-list > li{
display: inline-block;
vertical-align: top;
margin: 0 10px 10px 0;
}
.switchtime-list > li .inner{
display: inline-block;
padding: 10px 15px;
color: #F15A24;
font-weight: bold;
background-color: #fef5f2;
cursor: pointer;
}
.switchtime-list > li.on .inner{
background-color: #ffe4db;
}
.numtext{
display: inline-block;
vertical-align: baseline;
margin: 0 5px;
padding: 5px 10px;
font-weight: bold;
background-color: #fef5f2;
}javascript
- setIntervalを格納しておくための変数を用意しておきます。
- setIntervalの処理を作ります。その一連の処理を関数に収めておきます。
- setIntervalを実行、再実行する際は関数を実行します。
- 停止する場合はclearIntervalで変数を指定します。
$var count = 0;
var timer;
function switchtime(){
timer = setInterval( function(){
count++;
if( count >= $(".switchtime-list > li").length ){
count = 0;
}
$(".switchtime-list > li").removeClass("on");
$(".switchtime-list > li").eq( count ).addClass("on");
var order = count + 1;
$('.numtext').text( order );
},4000);
}
switchtime();
$(".switchtime-list > li").removeClass("on");
$(".switchtime-list > li").eq(0).addClass("on");
$(".switchtime-list > li > .inner").hover(function(){
if (typeof timer !== 'undefined') {
clearInterval( timer );
}
$(".switchtime-list > li").removeClass("on");
var btn = $(this).parent("li").attr("class");
$(this).closest("li").addClass("on");
count = $(this).closest("li").index();
var order = count + 1;
$('.numtext').text( order );
},function(){
switchtime();
});ここに注意！
- index()で取得できる値は0から始まります。「0 = 1番目」として計算されますので、その点の注意が必要です。
- ロールオーバーの処理が始まったらしっかりと「clearInterval」で自動切り替えを停止させて、countにカーソルの合わせている要素の順番の数値を渡します。
- カーソルが要素から放したら関数を実行し、自動切り替えを再実行します。
参照
【setIntervalとclearIntervalの使い方 – jQuery(javascript)の使い方】
https://sites.google.com/site/jqueryjavascript/setintervaltoclearintervalno-shii-fang
コメント