再生ボタンを連打するととてつもないスピードで変更するようになります。
setIntervalで作ったスライドショーの再生ボタンを連打しても、
おかしくならないようにできないのでしょうか?
//停止した場合の再開ボタンのJS
$('#js-play-btn').click(function() {
startTimer();
});
/* /オプションを足す場合はここへ記載 */
var isStart = false;
$('#js-play-btn').click(function() {
if (isStart == false) {
startTimer();
isStart = true;
}
});
としましたが連打するととてつもないスピードで変更するようになります。
こちらは'#js-play-btnをクリックしたときにisStart がfalseだったらタイマーを再開して、turueにfalseを変更するということをやっているのでしょうか?
ただisStartという変数や内容はここで定義するまえには存在しないものですよね。
この中身がtrueかfalseかはどこで決まっているのでしょうか?
またfalseが停止中の時で、trueが再生中を示しているのでしょうか?
これは仕様で決まっているのですか?
//スライドショー $(function(){ //(1)ページの概念・初期ページを設定 var page=0; //(2)イメージの数を最後のページ数として変数化 var lastPage =parseInt($("#slide img").length-1); //(3)最初に全部のイメージを一旦非表示にします $("#slide img").css("display","none"); //(4)初期ページを表示 $("#slide img").eq(page).css("display","block"); //(5)ページ切換用、自作関数作成。changePageを定義 function changePage(){ $("#slide img").fadeOut(1000); $("#slide img").eq(page).fadeIn(1000); }; //(6)~秒間隔でイメージ切換の発火設定 //※(5)でchangePageを定義している //TimerというタイマーIDを作成した。 var Timer; function startTimer(){ Timer =setInterval(function(){ if(page === lastPage){ page = 0; changePage(); }else{ page ++; changePage(); }; },5000); } //(7)~秒間隔でイメージ切換の停止設定 //clearIntervalとは、「setInterval」メソッドの繰り返し処理を停止するメソッド function stopTimer(){ clearInterval(Timer); } //(8)タイマースタート startTimer(); /* オプションを足す場合はここへ記載 */ //(9)「次へ」、左に画像を動かすをクリックボタン用のjs //※(5)でchangePageを定義している $("#next-left-btn").click(function() { //タイマー停止&スタート(クリックした時点から~秒とする為) stopTimer(); startTimer(); if(page === lastPage){ page = 0; changePage(); }else{ page ++; changePage(); }; }); //「戻る」、右に画像を動かすをクリックボタン用のjs $("#next-right-btn").click(function() { //タイマー停止&スタート(クリックした時点から~秒とする為) stopTimer(); startTimer(); if(page === 0){ page = lastPage; changePage(); }else{ page --; changePage(); }; }); //TimerというタイマーIDを作成した。下記の部分でしていている。 //Timer =setInterval(function(){ $('#pause-btn').click(function() { clearInterval(Timer); } ) //停止した場合の再開ボタンのJS $('#js-play-btn').click(function() { startTimer(); }); /* /オプションを足す場合はここへ記載 */ var isStart = false; $('#js-play-btn').click(function() { if (isStart == false) { startTimer(); isStart = true; } }); });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/12/15 04:05
2016/12/15 04:12
2016/12/15 04:14
退会済みユーザー
2016/12/15 04:22
2016/12/15 04:27
退会済みユーザー
2016/12/15 05:08
退会済みユーザー
2016/12/15 09:07
2016/12/15 09:18
退会済みユーザー
2016/12/15 09:40
2016/12/15 09:55
退会済みユーザー
2016/12/15 11:41
退会済みユーザー
2016/12/16 08:52