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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3213閲覧

settimeoutを使ったアニメーションの停止方法

southern_flavor

総合スコア70

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2015/06/15 23:53

編集2015/06/16 06:22

追記: jquery.pause.min.jsを使用してましたが、これだと停止後に操作が効かなくなってしまうようですので、使わないことにしました。

先日、こちらでサムネイルをスライドする方法を質問したのですが、bxsliderではなかなかできず、プラグインをcarouFredSelに変えて現在スライドショーを作成中です。

質問内容としては、タイトルの通りで、3のスライドショーに対してそれぞれ自動再生onに設定しているのですが、ページが読み込まれてから、カウントスタートし、数秒後にアニメーションが停止するようにしたいです。(例えば60秒後に自動再生offにしたような状態にするということです)

スライドさせるのは合計で3つなのですが、一番上のスライドショーは、jquery.pause.min.jsの中にあるpause()を使ってsettimeoutを実行したところ停止しました。

残りの2つがなかなか停止しません。。

コードはこちらです。
よろしくお願いいたします。

'''lang-html

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="http://www.jquerystudy.info/css_js/jquery.carouFredSel-6.2.1-packed.js"></script> <script type="text/javascript" language="javascript"> jQuery(document).ready(function($){ $(function() { var carouObj = new Object(); carouObj.auto = 0; carouObj.height = 142, carouObj.scroll = { duration:16000, easing:"linear" }; carouObj.items = { visible:5 }; $(".ticker ul").carouFredSel(carouObj); var pauseStatus = true; $('#thumbs').carouFredSel({ synchronise: ['#images ul', false, true], auto: {play:pauseStatus}, width: 598, height:141, items: { visible: 5, start: -2 }, scroll: { items : 1, onBefore: function( data ) { data.items.old.eq(2).removeClass('selected'); data.items.visible.eq(2).addClass('selected'); } } }); $('#images ul').carouFredSel({ auto: true, items: 1, scroll: { fx: 'uncover' } }); $('#thumbs li').click(function() { $('#thumbs').trigger( 'slideTo', [this, -2] ); }); $('ul#thumbs li:eq(2)').addClass('selected'); }); var over = $(".ticker ul").mouseover(function(){$(".ticker ul").pause();}); var out = $(".ticker ul").mouseout(function(){$(".ticker ul").resume();}); var tstop = function() { setTimeout(function(over,out) { $(".ticker ul").pause(); $("#thumbs li").pause(); $("#images ul").pause(); lstop(); }, 10000);//停止秒数を設定 }; var lstop = function() { $("#thumbs").mouseout(function(){ $("#thumbs").pause(); }); $("#images ul").mouseout(function(){ $("#images ul").pause(); }); $(".ticker ul").mouseout(function(){ $(".ticker ul").pause(); }); }; tstop(); }); </script> <style type="text/css"> ul { margin: 0; padding: 0; list-style: none; } li { display: list-item; } /* slidewrapper */ #slidewrapper { position: relative; width: 598px; height: 414px; overflow: hidden; border: 1px solid #f00; } #images { overflow: hidden; } #thumbs { width: 142px; height: 142px; } #images { width: 385px; height: 200px; position: relative; } #images ul { position: relative; } #images li { position: relative; float: left; } #thumbs { display: inline-block; position: relative; float: left; width: 598px; } #thumbs li { float: left; opacity: 0.2; -ms-filter: "alpha( opacity=20 )"; filter: alpha(opacity=20); margin-right: 2px; } #thumbs img { width: 137px; height: 137px; cursor: pointer; padding: 0px; } #thumbs li.selected { opacity: 1; -ms-filter: "alpha( opacity=100 )"; filter: alpha(opacity=100); } #thumbs li:hover { opacity: 1; -ms-filter: "alpha( opacity=100 )"; filter: alpha(opacity=100); } #wrappper { width: 598px; height: 144px; overflow: hidden; border: 1px solid #f00; } .ticker ul { position: relative; } .ticker ul li { float: left; margin: 1px; position: relative; } .ticker li img { width: 144px; height: 144px; float: left; } </style> </head> <body> <div id="wrappper" class="ticker"> <ul> <li><img src="sample1.jpg" /></li> <li><img src="sample2.jpg" /></li> <li><img src="sample3.jpg" /></li> <li><img src="sample4.jpg" /></li> <li><img src="sample5.jpg" /></li> <li><img src="sample6.jpg" /></li> </ul> </div> <div id="slidewrapper"> <div id="images"> <ul> <li><a target="_blank" href="">サンプルテキスト1(ここに内容)</a></li> <li><a target="_blank" href="">サンプルテキスト2(ここに内容)</a></li> <li><a target="_blank" href="">サンプルテキスト3(ここに内容)</a></li> <li><a target="_blank" href="">サンプルテキスト4(ここに内容)</a></li> <li><a target="_blank" href="">サンプルテキスト5(ここに内容)</a></li> <li><a target="_blank" href="">サンプルテキスト6(ここに内容)</a></li> </ul> </div> <ul id="thumbs"> <li><img src="sample1.jpg" /></li> <li><img src="sample2.jpg" /></li> <li><img src="sample3.jpg" /></li> <li><img src="sample4.jpg" /></li> <li><img src="sample5.jpg" /></li> <li><img src="sample6.jpg" /></li> </ul> </div> </body> </html> '''

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

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

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

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

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

ina

2015/06/17 04:41

一番上のスライドはどいう動きにしようとされていますか? 無限ループですか?
southern_flavor

2015/06/17 23:36

ご回答ありがとうございます。 基本は無限ループなのですが、settimeoutにてページロード後、自動再生されるのですが、一定時間経過したらアニメーションをauto:falseの状態にすることが狙いです。
guest

回答2

0

nanndemoiikaraさんの貼られたページを見ると、メソッドではなくイベントを発生させることでコントロールするみたいですね。
jQueryでイベントを発生させるには、$(セレクタ).trigger(イベント); という風に書きます。

なので、.pause(); のところを
.trigger("pause",true); にすると止まると思います。
再開は、.trigger("resume"); です。

上記の ,true の部分は、スクロールの動きの途中で止めるかどうかを指定するオプション(デフォルトはfalse)です。
一番上のスライダーには必要ですが、下の2つにはないほうが良いかもしれませんので、その際は .trigger("pause"); にしてください。

投稿2015/06/17 06:00

編集2015/06/17 08:54
ina

総合スコア127

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

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

southern_flavor

2015/06/17 23:44

ご丁寧に補足説明していただき、ありがとうございます。 nandemoiikaraさんが貼ってくださったサイトを見てなんとなくわかりましたが、inaさんのご説明でより詳しく理解することができました! メソッドではなく、イベントなんですね。 上のコメントもありがとうございました。
ina

2015/06/18 03:47

解決されたようでよかったです。
guest

0

ベストアンサー

var timeId = setTimeout(funciton(){}, 1000);
clearTimeout(timerId);

clearTimeout

投稿2015/06/16 00:01

編集2015/06/16 00:06
nanndemoiikara

総合スコア775

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

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

southern_flavor

2015/06/16 06:18

早速のご回答ありがとうございます。 この方法は以前にもやってまして、上のコードでも似たような処理をしています。 数秒経って、停止してもクリックで普通に操作できるようにしたいのですが、ご提示いただいた方法以外でなにかありましたら、回答いただけますと幸いです。 carouFredSelの中にアニメーションを停止させるメソッドを見つけられたらいいんですが。
southern_flavor

2015/06/17 23:38

ご回答ありがとうございます。 ご紹介いただいたサイトのカスタムイベントを参考にしたところ希望通りの動きになりました! ありがとうございます。 ちなみにバージョンは6.2.1です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問