締切済み

TinySlideshowについて

2010/11/15 17:28

TinySlideshowを利用したスライドショーを制作しております。左の画像と右側のリストともマウスオーバー<マウスオン？）したら自動スライドが止まる制御をしたいのですがどのようにすればよいかわかりません。よろしくお願いいたします。以下ページを参考にしております。 http://solidstate.jp/ImageDisplay/slideshow/script_141.html

tono1248
お礼率25% (6/24)

JavaScript
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

みんなの回答

my--
ベストアンサー率89% (91/102)

2010/11/17 13:36 回答No.3

Animated JavaScript Slideshow http://www.leigeber.com/2008/12/javascript-slideshow/ TinySlideshow Download http://forum.leigeber.com/index.php?app=downloads&showfile=6 ダウンロードしたTinySlideshow script.jsに簡単な追記を行ってみます。 //50行目付近 g.onmouseover=new Function('TINY.alpha.set(this,100,5);' + this.n + '.pr(' + i + ',1);');//停止（prメソッド呼出し） g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5);' + this.n + '.mv(1,0);');//再始動（mvメソッド呼出し）第二引数は0（偽値：autoモード） //60行目付近 //左矢印、右矢印のclick動作変更 b.onclick=new Function(this.n+'.pr(' + this.n + '.c,1);');//停止（prメソッド呼出し）第一引数はインスタンスのcプロパティ f.onclick=new Function(this.n+'.mv(1,0)')//再始動（mvメソッド呼出し）第二引数は0（偽値：autoモード） //110行目付近 var n=new Function(this.n+'.nf('+s+')'); clearTimeout(this.lt);//重複を避ける this.lt=setTimeout(n,this.imgSpeed*100); if(!c){ clearTimeout(this.at);//重複を避ける this.at=setTimeout(new Function(this.n+'.mv(1,0)'),this.speed*1000) } 要領さえ掴めば、停止、再始動程度の変更なら難しくなさそう。

yyr446
ベストアンサー率65% (870/1330)

2010/11/16 19:29 回答No.2

　それから、ご注意というか、お詫びになりますが、 No.1の回答のサンプルですが、まちがいなくメモリーリークしてます。「Excellent!」なリークパターンだそうな。よって、遊び以外では、使いすぎないでね。

yyr446
ベストアンサー率65% (870/1330)

2010/11/16 19:10 回答No.1

この前の質問の時とは違うjavascriptライブラリーですね。なかなか回答が付かないみたいですけど。　そのライブラリーにある機能を使ってちゃちゃっと出来ないときは、その改造方法で悩んだり、別のライブラリーを探すより、作ってとお願いした方が早いかも。ライブラリーなんて恐れおおくてなのれませんが、「SlideCanvasF.js 」↓なんて https://gist.github.com/701613 いかがです。(ある回答ように作ったのを改造したものです) ・自動スライド機能持ってます（縦も横も）。・サブネールマウスオーバーで画像フェードし、自動スライド止まります。・その他機能いろいろあったかな。 ※難点・基本的にはHTML5の<CANVAS>要素使ってますから、IE8以下では多少無理があります。 IE8以下で使うときは、別途↓よりexcanvas.jsを入手してください。 http://code.google.com/p/flot/downloads/detail?name=flot-0.6.zip&can=2&q= ・使い方の解説ページはありません。（なんと不親切）こおいうふうにHTMLマークアップします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Canvas Slide By HTML5</title> <style type="text/css"> .slide_canvas {margin:10px auto 5px;text-align:center;} .thumbbox {margin:5px auto 10px;text-align:center;} canvas {border:solid 1px gray;} </style>  <script type="text/javascript" src="/jslib/SlideCanvasF.js"></script> </head> <body> <div id="slide1" class="slide_canvas"> <canvas></canvas> <div class="thumbbox"> <a href="/image/azu.jpg"><img src="/image/s_azu.jpg" alt="azu"></a> <a href="/image/mio.jpg"><img src="/image/s_mio.jpg" alt="mio"></a> <a href="/image/yui.jpg"><img src="/image/s_yui.jpg" alt="yui"></a> <a href="/image/mugi.jpg"><img src="/image/s_mugi.jpg" alt="mugi"></a> <a href="/image/ritu.jpg"><img src="/image/s_ritu.jpg" alt="ritu"></a> </div> </div> <script type="text/javascript"> my_slide_1 = new slide_canvas( document.getElementById("slide1"), // スライドショーのコンテナーDIVを渡します。 null, // CANVASの幅、nullを指定すると自動調整 null, // CANVASの高さ、nullを指定すると自動調整 document.getElementById("slide1").getElementsByTagName("div")[0] //サブネールを配置するDIVを渡します。 ); my_slide_1.Start(); //これで、CANVAS描画開始です。引数は無しです。 my_slide_1.slideShowInit( //これで、自動スライド開始です。 2000, // インターバル(ミリ秒) 'B', //オーダー B or F 'H' //方向 H or V ); </script> </body> </html> 配置や見栄えはCSSで勝手に変えてください。他に.slideShowStop()、.popup()メソッド等もあります。投稿サイズの都合で詳しい説明は割愛します。ソース見てね。