問題 × 解決策

setInternalを停止、再実行する方法

問題

setInternalを停止、再実行するには?

解決策

  1. setIntervalを格納しておくための変数を用意しておきます。
  2. setIntervalの処理を作ります。その一連の処理を関数に収めておきます。
  3. setIntervalを実行、再実行する際は関数を実行します。
  4. 停止する場合は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

  1. setIntervalを格納しておくための変数を用意しておきます。
  2. setIntervalの処理を作ります。その一連の処理を関数に収めておきます。
  3. setIntervalを実行、再実行する際は関数を実行します。
  4. 停止する場合は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();
});

ここに注意!

  1. index()で取得できる値は0から始まります。「0 = 1番目」として計算されますので、その点の注意が必要です。
  2. ロールオーバーの処理が始まったらしっかりと「clearInterval」で自動切り替えを停止させて、countにカーソルの合わせている要素の順番の数値を渡します。
  3. カーソルが要素から放したら関数を実行し、自動切り替えを再実行します。

参照

【setIntervalとclearIntervalの使い方 – jQuery(javascript)の使い方】
https://sites.google.com/site/jqueryjavascript/setintervaltoclearintervalno-shii-fang

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

one × 1 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧