質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3437閲覧

スライドショーの停止ボタンを作ったのですが、止まりません。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/11/11 12:22

スライドショーの停止ボタンを作ったのですが、止まりません。
再生ボタンも作りたいです。

下記ではだめなのでしょうか?

$('#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); } )

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

JavaScript

1Timer =setInterval

しているので、こうではないですか?

JavaScript

1clearInterval(Timer);

stopTimer()を作っているので、stopTimer()を呼び出せばよいのでは。

投稿2016/11/12 06:39

naomi3

総合スコア1105

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/11/12 07:35

ありがとうございます。 下記のように行いましたが、やはり止まりません。 http://codepen.io/anon/pen/XNXWjp cssあり https://jsfiddle.net/t3dm0em9/ なぜかこちらではちゃんと動いてくれませんが、 自分のサイト上でもやはり止まりませんでした また教えていただいたソースにしたところblisk上に下記のエラーが出ました。 Uncaught Error: Syntax error, unrecognized expression: #" at db.error at ob at xb at db at find at o.fn.init at o at (anonymous function) at dispatch at r.handle jquery.min.js:2:12387 jquery.min.js:2:18261 jquery.min.js:2:2092
退会済みユーザー

退会済みユーザー

2016/11/25 07:48

ありがとうございます。下記で確かに止まりました。 $('#pause-btn').click(function() { clearInterval(Timer); } ) 原因は下記のようにボタンがなっていたのことのようです。 <a return false;> ただその後再開のボタンをどうするか今考えています。 http://phpjavascriptroom.com/?t=js&p=timer ここを見ても難しいです。 アドバイスいただけませんでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問