ベストアンサー

Javaスクリプトで画像を縦にスクロールさせたいです。

2010/03/28 04:31

Javaスクリプトで画像を縦にスクロールさせたいです。お世話になります。ホームページに、流れる画像(リンク付き、複数)を使用したいと思い、検索したところ以下の参考サイトを見つけました。 http://myako.net/java4/asan/nagare.html こちらでは横スクロールは紹介されているのですが、それを縦にスクロールさせたいと思い調べてみたものの恥ずかしながら初心者なものでさっぱり判りません。どうかアドバイスをください。よろしくお願いします。

fururururun
お礼率17% (3/17)

JavaScript
回答数13
ありがとう数10

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

質問者が選んだベストアンサー

ベストアンサー

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

2010/03/30 13:11 回答No.12

お待たせしました。完成しました。（回答削除されたみたいなので）リスト要素をぐるぐるスクロール表示です。オブジェクト指向です。CSS定義は入りません。スクロール表示場所は幅と高さを指定して生成します。スクロール速度も設定できます。使い方 var my_Scroll_Div = new Scroll_Div(document.getElementById("gazoulist")); でスクロールしたいリスト要素(ulとかol)のIDを渡します。 my_Scroll_Div.init(250,100,'left'); でスクロール表示場所の高さと幅と回り込みを指定します。 my_Scroll_Div.scroll_timer(10,300); で、スクロール刻み(ピクセル)とインターバル(ミリ秒)を指定します。クラスオブジェクトはこれです。 function Scroll_Div(elm){ this.elm=elm; this.elm_id=elm.id; this.contener; this.scroll_height; this.scroll_count; this.timer; this.gazou_height=elm.offsetHeight; elm.style.position='absolute'; elm.style.padding='0px'; elm.style.margin='0px'; elm.style.listStyle='none'; elm.style.top='0px'; var ul_len=elm.childNodes.length; for(var i=0;i<ul_len;i++){ if(elm.childNodes[i].nodeName=="LI"){ elm.appendChild(elm.childNodes[i].cloneNode(true)); } } this.init=function(height,width,floating){ var contener=document.createElement("div"); contener.id="my_contener"; contener.style.position='relative'; contener.style.height=height+'px'; contener.style.width=width+'px'; contener.style.overflow='hidden'; contener.style.styleFloat=floating; contener.style.cssFloat=floating; contener.appendChild(this.elm.cloneNode(true)); document.getElementsByTagName("BODY")[0].insertBefore(contener,this.elm); this.elm.parentNode.removeChild(this.elm); this.contener=contener; this.scroll_height=contener.offsetHeight; this.scroll_count=this.scroll_height; }; this.scroll_timer=function(step,interval){ var scroll_count=this.scroll_count; var scroll_height=this.scroll_height; var elm=document.getElementById(this.elm_id); var gazou_height=this.gazou_height; this.timer=setInterval(function(){ if(scroll_count>-gazou_height){ elm.style.top= scroll_count + "px"; scroll_count=scroll_count - parseInt(gazou_height/step); }else{ scroll_count=scroll_height-scroll_height; //clearInterval(timer); } },interval); } } サンプルはこんなかんじ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>縦スクロール</title> <script type="text/javascript" charset="utf-8">  </script> </head> <body> <ul id="gazoulist"> <li><a href="about:blank"><img src="1_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="2_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="3_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="4_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="5_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="6_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="7_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="8_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="9_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="10_s.jpg" width="75" height="75"></a></li> </ul> <div> 本文 </div> <button onclick="my_Scroll_Div.stop();">スクロール停止</button> <button onclick="my_Scroll_Div.scroll_timer(10,300)">スクロール再開</button> <br style="clear: both;"> <script type="text/javascript" charset="utf-8"> Scroll_Div.prototype.stop=null; var my_Scroll_Div = new Scroll_Div(document.getElementById("gazoulist")); my_Scroll_Div.stop=function(){clearInterval(this.timer);}; my_Scroll_Div.init(250,100,'left'); my_Scroll_Div.scroll_timer(10,300); </script> </body> </html>

質問者

お礼 2010/04/01 21:54

yyr446さん、たくさん考えてくださってありがとうございます！仕事でてんてこまいでお礼が遅くなってしまい申し訳ありません。自力で探しても探しても煮詰まるばかりで、思い切ってこちらで質問させていただいたのですが、こんなに親切にしていただけるなんて…感無量です。端から不義理をしてしまい、すみませんでした。回答削除？の件がよくわからず…変なお手数をかけてしまっていたら申し訳ありません。大丈夫でしたか？まずさきにお礼だけでも…と思いまして、うまく感謝を伝えられませんが投稿させて頂きます。基盤を整えてもらえたので、あと頑張って試してみようと思います。本当にありがとうございました！！(^o^) こうやってシャカシャカとプログラム(…って言うんですか？タグ？)の組み立てができるなんて、なんかもう、すごすぎです。ほう…

その他の回答 (12)

fujillin
ベストアンサー率61% (1594/2576)

2010/03/30 18:23 回答No.13

＞まうすあてたら、とめてくれぇ～。と代弁＞＃10 なんかめんどうだったので…（ごめん）ただいま体調をぶち壊して、朦朧状態ゆえ気力が続かん。（←いいわけ）つっこみはありがたいが、残念ながら反応できそもない。やってみたかったのは、サイズ指定ありでもなしでもOKみたいなやつ。＞とかに、たいんいは？これも無気力ゆえ。文字と数字が混在してまんねん。（一応、通じちゃうけど）正しくは数字で取ってきて、設定のときに単位をつけるべきだった。（反省）あぁ、きょうはさっさと寝んべ。（当分ダメそうだ）

質問者

お礼 2010/04/01 22:07

fujillinさんあわわわ、体調の方はいかがですか？大変な時に、気にかけて頂いて本当にありがとうございます！みなさんお友達さんなんですか？一言をすんなり理解・了解、みたいな知識の共有ができるってかっこいいですね～(^o^)尊敬です。お手数かけてすみませんでした、心から感謝します。季節は変われど春冷えのする日々ですので、どうぞお身体大事になさってくださいませね。早く回復される事をお祈りしております。

babu_baboo
ベストアンサー率51% (268/525)

2010/03/30 12:58 回答No.11

まうすあてたら、とめてくれぇ～。と代弁＞＃10 それでなくても、このてのやつは、ゆ～ざ～にやさしくないじょ。 d.style.height = h とかに、たいんいは？ぐろ～ばるへんすうではないけれど、・・・。

質問者

お礼 2010/04/01 22:15

babu_babooさんお知恵拝借、ありがとうございます！他の調べ物をしていた時に、babu_babooさんのご回答を拝見した記憶があります。 OKWaveってプロの方たちがたくさんいらっしゃるんですね。しかも仲良しさんだあ(*^_^*) なんだかとても場違いなところで図々しくも質問してしまった…と思っていましたが、こんなにも親切に対応していただけて感謝の極みです。代弁までしてくださり、ありがとうございました！

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

2010/03/30 12:47 回答No.10

お待たせしました。完成しました。リスト要素をぐるぐるスクロール表示です。オブジェクト指向です。CSS定義は入りません。スクロール表示場所は幅と高さを指定して生成します。スクロール速度も設定できます。使い方 var my_Scroll_Div = new Scroll_Div(document.getElementById("gazoulist")); でスクロールしたいリスト要素(ulとかol)のIDを渡します。 my_Scroll_Div.init(250,100,'left'); でスクロール表示場所の高さと幅と回り込みを指定します。 my_Scroll_Div.scroll_timer(10,300); で、スクロール刻み(ピクセル)とインターバル(ミリ秒)を指定します。クラスオブジェクトはこれです。 function Scroll_Div(elm){ this.elm=elm; this.elm_id=elm.id; this.contener; this.scroll_height; this.scroll_count; this.gazou_height=elm.offsetHeight; elm.style.position='absolute'; elm.style.padding='0px'; elm.style.margin='0px'; elm.style.listStyle='none'; elm.style.top='0px'; var ul_len=elm.childNodes.length; for(var i=0;i<ul_len;i++){ if(elm.childNodes[i].nodeName=="LI"){ elm.appendChild(elm.childNodes[i].cloneNode(true)); } } this.init=function(height,width,floating){ var contener=document.createElement("div"); contener.id="my_contener"; contener.style.position='relative'; contener.style.height=height+'px'; contener.style.width=width+'px'; contener.style.overflow='hidden'; contener.style.styleFloat=floating; contener.style.cssFloat=floating; contener.appendChild(this.elm.cloneNode(true)); document.getElementsByTagName("BODY")[0].insertBefore(contener,this.elm); this.elm.parentNode.removeChild(this.elm); this.contener=contener; this.scroll_height=contener.offsetHeight; this.scroll_count=this.scroll_height; }; this.scroll_timer=function(step,interval){ var scroll_count=this.scroll_count; var scroll_height=this.scroll_height; var elm=document.getElementById(this.elm_id); var gazou_height=this.gazou_height; var timer=setInterval(function(){ if(scroll_count>-gazou_height){ elm.style.top= scroll_count + "px"; scroll_count=scroll_count - parseInt(gazou_height/step); }else{ scroll_count=scroll_height-scroll_height; //clearInterval(timer); } },interval); } } サンプルはこんなかんじ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>縦スクロール</title> <script type="text/javascript" charset="utf-8">  </script> </head> <body> <ul id="gazoulist"> <li><a href="about:blank"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75"></a></li> </ul> <div> 本文 </div> <br style="clear: both;"> <script type="text/javascript" charset="utf-8"> //Scroll_Div.prototype.init=null; var my_Scroll_Div = new Scroll_Div(document.getElementById("gazoulist")); my_Scroll_Div.init(250,100,'left'); my_Scroll_Div.scroll_timer(10,300); </script> </body> </html> ※まだまだ、プロの施工業者にはおよびもつきませんが、つっこみどころ満載かと思いますが、このへんでおしまいにします。

fujillin
ベストアンサー率61% (1594/2576)

2010/03/30 12:34 回答No.9

少し便利っぽく考えたら、面どくなった。（オブジェクト化してません）位置やサイズの指定は外側のdivに対して行なう。指定が無いときは適当に処理。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> #imageScroll {position:absolute;} #imageScroll ul {position:absolute; list-style:none; margin:0;} </style> <script type="text/javascript"></script> </head> <body> <div id="imageScroll"> <ul> <li><img src="A.jpg" alt="A"></li> <li><img src="B.jpg" alt="B"></li> <li><img src="C.jpg" alt="C"></li> <li>文字があったりしてもOK</li> <li><img src="D.jpg" alt="D"></li> <li><img src="E.jpg" alt="E"></li> </ul> </div> </body> </html> うん、多分レスつかんべぇ。

babu_baboo
ベストアンサー率51% (268/525)

2010/03/30 11:09 回答No.8

ListRoller.prototype.start = function ( ) { 　var cbFunc = (function ( that ) { return function( ) { that.mover( ); }; })( this ); 　return this.tmid = setInterval( cbFunc, this.span ); }; ListRoller.prototype.mover = function ( ) { 　var i = 0, o, h, t; 　if( this.step > 0 ) { 　　while( o = this.ts[ i++ ] ) { 　　　t = ( h = o.offsetTop + this.step ) - this.max; 　　　if( 0 < t ) h = -o.offsetHeight + t; 　　　o.style.top = h + 'px'; 　　} 　} else { 　　while( o = this.ts[ i++ ] ) { 　　　t = ( h = o.offsetTop + this.step ) + o.offsetHeight; 　　　if( 0 > t ) h = this.max + t; 　　　o.style.top = h + 'px'; 　　} 　} }; ListRoller.prototype.stop = function ( ) { 　return clearTimeout( this.tmid ); }; ListRoller.Handler = (function ( getParent ) { 　var m; 　return function ( evt ) { 　　var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; 　　var p = getParent( e, 'nodeName', 'UL' ); 　　if( m ) { 　　　m.start( ); 　　　m = null; 　　} 　　　　if( p ) { 　　　m = this.memory[ p.id ]; 　　　m.stop( ); 　　} 　}; })( 　function ( n, t, v ) { 　　return n ? v == n[t] ? n: arguments.callee( n.parentNode, t, v): null; 　}); ListRoller.add = function ( id, step, interval ) { 　var e = document.getElementById( id ); 　　if( 'undefined' === typeof this.memory ) { 　　this.memory = [ ]; 　　document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 　　　'mouseover', function( evt ) { ListRoller.Handler( evt ); }, false ); 　} 　　if( e && 'UL' == e.tagName && !this.memory[ id ] ) 　　this.memory[ id ] = new this( e, step, interval ); }; //__________ ListRoller.add( 'ItemList', 2, 100 ); ListRoller.add( 'ItemList2', -2, 100 ); </script> ぜんかくくうはくは、すべてはんかくにしてちょ！ img に alt は、「必須」だってさぁ。すくりぷとおふのときに、こうはんのぶぶんがみえないと、とべなよ～ぉ。捨て名で、レスつかないとほうに、１０００点。

babu_baboo
ベストアンサー率51% (268/525)

2010/03/30 11:04 回答No.7

ながいのでぶんかつです。それにしても、ほうちぷれ～に、萌え燃えするとは・・・すごい！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> #ItemList, #ItemList2 { list-style: none; overflow : auto; margin : 0; padding : 0; height : 300px; width : 180px; float: left; } #ItemList li a img, #ItemList2 li a img { width : 180px; height: 50px; border: 0px none; } </style> <body> <div id="MainMenu"> 　<ul id="ItemList"> 　　<li><a href="#"><img src="./img/0.gif" alt="Image0"></a> 　　<li><a href="#"><img src="./img/1.gif" alt="Image1"></a> 　　<li><a href="#"><img src="./img/2.gif" alt="Image2"></a> 　　<li><a href="#"><img src="./img/3.gif" alt="Image3"></a> 　　<li><a href="#"><img src="./img/4.gif" alt="Image4"></a> 　　<li><a href="#"><img src="./img/5.gif" alt="Image5"></a> 　　<li><a href="#"><img src="./img/6.gif" alt="Image6"></a> 　</ul> 　<ul id="ItemList2"> 　　<li><a href="#"><img src="./img/0.gif" alt="Image0"></a> 　　<li><a href="#"><img src="./img/1.gif" alt="Image1"></a> 　　<li><a href="#"><img src="./img/2.gif" alt="Image2"></a> 　　<li><a href="#"><img src="./img/3.gif" alt="Image3"></a> 　　<li><a href="#"><img src="./img/4.gif" alt="Image4"></a> 　　<li><a href="#"><img src="./img/5.gif" alt="Image5"></a> 　　<li><a href="#"><img src="./img/6.gif" alt="Image6"></a> 　</ul> </div> <script type="text/javascript"> //@cc_on var ListRoller = function ( ) { 　this.init.apply( this, arguments ); 　this.start( ); }; ListRoller.prototype.init = function ( e, step, span ) { 　this.p = e; 　this.ts = e.getElementsByTagName( 'LI' ); 　this.step = step || 2; 　this.span = span || 50; 　this.tmid = null; 　　var c = 0, b = 0, max = 0, o, s; 　　e.style.overflow = 'hidden' 　e.style.position = 'relative'; 　　while( o = this.ts[ c++ ] ) { 　　s = o.style; 　　s.position = 'absolute'; 　　s.left = '0px'; 　　s.top = ( max += b ) + 'px'; 　　b = o.offsetHeight; 　} 　this.max = max; };

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

2010/03/29 21:47 回答No.6

No.3のをオブジェクト施行してみたが、全然、代わり映えしなかった。もしかして、意味がちがうのだろうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>縦スクロール</title> <style type="text/css"> #scroll_contener {position:relative;height:250px;width:100px;overflow-y:hidden;float:left;} ul#gazoulist {position:absolute;padding:0px;margin:0px;top:0px;list-style:none;} </style> <script type="text/javascript" charset="utf-8">  </script> </head> <body> <div id="scroll_contener"> <ul id="gazoulist"> <li><a href="about:blank"><img src="1_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="2_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="3_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="4_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="5_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="6_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="7_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="8_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="9_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="10_s.jpg" width="75" height="75"></a></li> </ul> </div> <div> 本文 </div> <br style="clear: both;"> <script type="text/javascript" charset="utf-8"> var my_Scroll_Div = new Scroll_Div(document.getElementById("scroll_contener"),document.getElementById("gazoulist")); my_Scroll_Div.scroll_timer(10,300); </script> </body> </html> 目標： GazoScroll3.htm 現実： GazoScroll4.htm

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

2010/03/29 21:42 回答No.5

No.3のをオブジェクト施行してみたが、全然、代わり映えしなかった。もしかして、意味がちがうのだろうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>縦スクロール</title> <style type="text/css"> #scroll_contener {position:relative;height:250px;width:100px;overflow-y:hidden;float:left;} ul#gazoulist {position:absolute;padding:0px;margin:0px;top:0px;list-style:none;} </style> <script type="text/javascript" charset="utf-8">  </script> </head> <body> <div id="scroll_contener"> <ul id="gazoulist"> <li><a href="about:blank"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75"></a></li> </ul> </div> <div> 本文 </div> <br style="clear: both;"> <script type="text/javascript" charset="utf-8"> var my_Scroll_Div = new Scroll_Div(document.getElementById("scroll_contener"),document.getElementById("gazoulist")); my_Scroll_Div.scroll_timer(10,300); </script> </body> </html>

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

2010/03/29 20:28 回答No.4

本当は、これ↓みたいなのが作りたかったが、もうあきらめてこのライブラリー（jQueryのプラグイン）使おう、超簡単 http://gmarwaha.com/jquery/jcarousellite/ No.3に適用すると <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>縦スクロール</title> <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.4.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="/jslib/jcarousellite_1.0.1.min.js"></script> <script type="text/javascript" charset="utf-8">  </script> </head> <body> <div class="scroll_contener" style="float:left;"> <ul id="gazoulist"> <li><a href="about:blank"><img src="1_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="2_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="3_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="4_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="5_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="6_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="7_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="8_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="9_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="10_s.jpg" width="75" height="75"></a></li> </div> <div> 本文 </div> <br style="clear: both;"> </body> </html>

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

2010/03/29 19:36 回答No.3

ぐるぐるつながってスクロールはしませんが、妥協してよいのなら．．．（一巡すると少しの間、余白がながれてしまう）簡単になります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>縦スクロール</title> <style type="text/css"> #scroll_contener {position:relative;height:250px;width:100px;overflow-y:hidden;float:left;} ul#gazoulist {position:absolute;padding:0px;margin:0px;top:0px;list-style:none;} </style> </head> <body> <div id="scroll_contener"> <ul id="gazoulist"> <li><a href="about:blank"><img src="1_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="2_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="3_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="4_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="5_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="6_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="7_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="8_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="9_s.jpg" width="75" height="75"></a></li> <li><a href="about:blank"><img src="10_s.jpg" width="75" height="75"></a></li> </ul> </div> <div> 本文 </div> <br style="clear: both;"> <script type="text/javascript" charset="utf-8"> (function(){ var scroll_timer; scroll_timer=setInterval(scrolling(document.getElementById("gazoulist")),100); function scrolling(elm){ var gazou_height=document.getElementById("gazoulist").offsetHeight; var scroll_height=document.getElementById("scroll_contener").offsetHeight; var scroll_count= scroll_height; return function(){ if(scroll_count>-gazou_height){ elm.style.top= (scroll_count) + "px"; scroll_count=scroll_count - parseInt(gazou_height/100); }else{ // clearInterval(scroll_timer); scroll_count=scroll_height; } } } })(); </script> </body> </html>

Javaスクリプトで画像を縦にスクロールさせたいです。