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

解決済

質問者：fururururun
質問日時：2010/03/28 04:31
回答数：13件

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

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

どうかアドバイスをください。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (13件中11～13件)

ベストアンサー優先
最新から表示
回答順に表示

No.3

回答者： yyr446
回答日時：2010/03/29 19:36

ぐるぐるつながってスクロールはしませんが、妥協してよいのなら．．．

（一巡すると少しの間、余白がながれてしまう）
簡単になります。
<!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>

- 0
- 件

通報する

No.2

回答者： yyr446
回答日時：2010/03/29 15:13

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>

- 0
- 件

通報する

No.1

回答者： yyr446
回答日時：2010/03/29 14:45

今回は、ご提示の参考サイトの改造じゃなくて、

別の例ですけど、いかがですか？
画像をローテーションで入れ替えながら縦スクロールします。
これで出来たと思ったら、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>