追記: 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> '''回答2件
あなたの回答
tips
プレビュー