スライドショーの停止ボタンを作ったのですが、止まりません。
再生ボタンも作りたいです。
下記ではだめなのでしょうか?
$('#pause-btn').click(function() { clearTimeout(Timer); } )
・
http://codepen.io/anon/pen/XNXWjp
・jsソース
//スライドショー $(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() { clearTimeout(Timer); } )
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/11/12 07:35
退会済みユーザー
2016/11/25 07:48