ベストアンサー

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)

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

2010/03/29 15:13 回答No.2

IEでも一応できるようになったけど．．．やっぱり作りなおそーと。 <!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> </head> <body> <div id="scroll_contener" style="position:relative;height:1px;overflow-y:hidden;float:left;"> <div id="scroll_area" style="position:absolute;top:1px;height:1px;"> <img id="scroll_img" src="about:blank" style="width:1px;height:1px;"> </div> </div> <div> 本文 </div> <br style="clear: both;"> <ul id="gazoulist" style="display:none"> <li><img src="1_s.jpg" width="75" height="75"></li> <li><img src="2_s.jpg" width="100" height="100"></li> <li><img src="3_s.jpg" width="80" height="60"></li> <li><img src="4_s.jpg" width="90" height="50"></li> <li><img src="5_s.jpg" width="80" height="80"></li> </ul> <script type="text/javascript" charset="utf-8"> (function(){ var gazou_list=[[],[],[]]; document.getElementById("gazoulist").style.display="block"; for(var i=0;i<document.getElementById("gazoulist").childNodes.length;i++){ if(document.getElementById("gazoulist").childNodes[i].nodeType=="1" && document.getElementById("gazoulist").childNodes[i].childNodes[0].nodeName=="IMG"){ gazou_list[0].push(document.getElementById("gazoulist").childNodes[i].childNodes[0].src); gazou_list[1].push(document.getElementById("gazoulist").childNodes[i].childNodes[0].height); gazou_list[2].push(document.getElementById("gazoulist").childNodes[i].childNodes[0].width); } } document.getElementById("gazoulist").style.display="none"; var scroll_area=document.getElementById("scroll_area"); var rot_count=0; var rot_timer=setInterval(rot_set(scroll_area,gazou_list),2000); var scroll_timer; function rot_set(elm,data){ return function(){ if(rot_count>(data.length-1)){ rot_count=0; }else{ document.getElementById("scroll_contener").style.height=data[1][rot_count]+"px"; document.getElementById("scroll_contener").style.width=data[2][rot_count]+"px"; scroll_area.style.height=data[1][rot_count]+"px"; scroll_area.style.width=data[2][rot_count]+"px"; document.getElementById("scroll_img").src=data[0][rot_count]; document.getElementById("scroll_img").style.width=data[2][rot_count]+"px"; document.getElementById("scroll_img").style.height=data[1][rot_count]+"px"; scroll_timer=setInterval(scrolling(scroll_area,data[1][rot_count]),100); rot_count++; } } } function scrolling(elm,count){ var scroll_count=count; return function(){ if(scroll_count>=-1*count){ elm.style.top= (scroll_count) + "px"; scroll_count=scroll_count - count/10; }else{ clearInterval(scroll_timer); scroll_count=count; } } } })(); </script> </body> </html>

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

2010/03/29 14:45 回答No.1

今回は、ご提示の参考サイトの改造じゃなくて、別の例ですけど、いかがですか？画像をローテーションで入れ替えながら縦スクロールします。これで出来たと思ったら、IEではだめだった。（画像リスト部を非表示にすると、各<img>のwidthとheightが取れない。）＝＞再考．．． <!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> </head> <body> <div id="scroll_contener" style="position:relative;height:0px;overflow-y:hidden;float:left;"> <div id="scroll_area" style="position:absolute;top:0px;height:0px;"> <img id="scroll_img" src="about:blank" style="width:0px;height:0px;"> </div> </div> <div> 本文 </div> <br style="clear: both;"> <ul id="gazoulist" style="display:none"> <li><img src="1_s.jpg" width="75" height="75"></li> <li><img src="2_s.jpg" width="100" height="100"></li> <li><img src="3_s.jpg" width="80" height="60"></li> <li><img src="4_s.jpg" width="90" height="50"></li> <li><img src="5_s.jpg" width="80" height="80"></li> </ul> <script type="text/javascript" charset="utf-8"> (function(){ var gazou_list=[]; for(var i=0;i<document.getElementById("gazoulist").childNodes.length;i++){ if(document.getElementById("gazoulist").childNodes[i].nodeType=="1" && document.getElementById("gazoulist").childNodes[i].childNodes[0].nodeName=="IMG"){ gazou_list.push(document.getElementById("gazoulist").childNodes[i].childNodes[0]); } } var scroll_area=document.getElementById("scroll_area"); var rot_count=0; var rot_timer=setInterval(rot_set(scroll_area,gazou_list),2000); var scroll_timer; function rot_set(elm,data){ return function(){ if(rot_count>(data.length-1)){ rot_count=0; }else{ document.getElementById("scroll_contener").style.height=data[rot_count].height+"px"; document.getElementById("scroll_contener").style.width=data[rot_count].width+"px"; document.getElementById("scroll_img").src=data[rot_count].src; document.getElementById("scroll_img").style.width=data[rot_count].width+"px"; document.getElementById("scroll_img").style.height=data[rot_count].height+"px"; scroll_timer=setInterval(scrolling(scroll_area,data[rot_count].height),100); rot_count++; } } } function scrolling(elm,count){ var scroll_count=count; return function(){ if(scroll_count>=-1*count){ elm.style.top= (scroll_count) + "px"; scroll_count=scroll_count - count/10; }else{ clearInterval(scroll_timer); scroll_count=count; } } } })(); </script> </body> </html>