ウォッチ
Javaスクリプトで画像を縦にスクロールさせたいです。
お世話になります。
ホームページに、流れる画像(リンク付き、複数)を使用したいと思い、
検索したところ以下の参考サイトを見つけました。
http://myako.net/java4/asan/nagare.html
こちらでは横スクロールは紹介されているのですが、
それを縦にスクロールさせたいと思い調べてみたものの
恥ずかしながら初心者なものでさっぱり判りません。
どうかアドバイスをください。
よろしくお願いします。
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">
<!--
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);
}
}
// -->
</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>
-
-
- 0
- 件
-
この回答へのお礼
お礼日時：2010/04/01 21:54
yyr446さん、たくさん考えてくださってありがとうございます！
仕事でてんてこまいでお礼が遅くなってしまい申し訳ありません。
自力で探しても探しても煮詰まるばかりで、思い切ってこちらで質問させていただいたのですが、
こんなに親切にしていただけるなんて…感無量です。
端から不義理をしてしまい、すみませんでした。
回答削除？の件がよくわからず…変なお手数をかけてしまっていたら申し訳ありません。大丈夫でしたか？
まずさきにお礼だけでも…と思いまして、うまく感謝を伝えられませんが投稿させて頂きます。
基盤を整えてもらえたので、あと頑張って試してみようと思います。
本当にありがとうございました！！(^o^)
こうやってシャカシャカとプログラム(…って言うんですか？タグ？)の組み立てができるなんて、なんかもう、すごすぎです。ほう…
No.13
- 回答日時：
＞まうすあてたら、とめてくれぇ～。
と代弁＞＃10なんかめんどうだったので…（ごめん）
ただいま体調をぶち壊して、朦朧状態ゆえ気力が続かん。（←いいわけ）
つっこみはありがたいが、残念ながら反応できそもない。
やってみたかったのは、サイズ指定ありでもなしでもOKみたいなやつ。
＞とかに、たいんいは？
これも無気力ゆえ。文字と数字が混在してまんねん。（一応、通じちゃうけど）
正しくは数字で取ってきて、設定のときに単位をつけるべきだった。（反省）
あぁ、きょうはさっさと寝んべ。（当分ダメそうだ）
-
-
- 0
- 件
-
この回答へのお礼
お礼日時：2010/04/01 22:07
fujillinさん
あわわわ、体調の方はいかがですか？
大変な時に、気にかけて頂いて本当にありがとうございます！
みなさんお友達さんなんですか？
一言をすんなり理解・了解、みたいな知識の共有ができるってかっこいいですね～(^o^)尊敬です。
お手数かけてすみませんでした、心から感謝します。
季節は変われど春冷えのする日々ですので、どうぞお身体大事になさってくださいませね。
早く回復される事をお祈りしております。
No.11
- 回答日時：
まうすあてたら、とめてくれぇ～。
と代弁＞＃10それでなくても、このてのやつは、ゆ～ざ～にやさしくないじょ。
d.style.height = h
とかに、たいんいは？
ぐろ～ばるへんすうではないけれど、・・・。
-
-
- 0
- 件
-
この回答へのお礼
お礼日時：2010/04/01 22:15
babu_babooさん
お知恵拝借、ありがとうございます！
他の調べ物をしていた時に、babu_babooさんのご回答を拝見した記憶があります。
OKWaveってプロの方たちがたくさんいらっしゃるんですね。
しかも仲良しさんだあ(*^_^*)
なんだかとても場違いなところで図々しくも質問してしまった…と思っていましたが、
こんなにも親切に対応していただけて感謝の極みです。
代弁までしてくださり、ありがとうございました！
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">
<!--
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);
}
}
// -->
</script>
</head>
<body>
<ul id="gazoulist">
<li><a href="about:blank"><img src="http://static.flickr.com/66/199481236_dc98b5abb3 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/75/199481072_b4a0d09597 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/57/199481087_33ae73a8de … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/77/199481108_4359e6b971 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/58/199481143_3c148d9dd3 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/72/199481203_ad4cdcf109 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/58/199481218_264ce20da0 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/69/199481255_fdfe885f87 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/60/199480111_87d4cb3e38 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/70/229228324_08223b70fa … 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>
※まだまだ、プロの施工業者にはおよびもつきませんが、
つっこみどころ満載かと思いますが、このへんでおしまいにします。
-
-
- 0
- 件
-
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"><!--
window.onload = function() {
var step = 2, speed = 40; //←速度制御用変数
var d = document.getElementById('imageScroll');
var i, k, h, u = d.getElementsByTagName('UL')[0];
var uh = u.clientHeight, uw = u.clientWidth;
h = attr('width'), d.style.width = !parseInt(h)?uw:h;
h = attr('height'), h = !parseInt(h)?uh:h;
d.style.height = h, d.style.overflow = 'hidden';
h = Math.ceil(parseInt(h)*2/uh), h = h<2?2:h;
uw = u.childNodes.length;
for (i=1; i<h; i++) for (k=0; k<uw; k++) u.appendChild(u.childNodes[k].cloneNode(true));
h = 0;
setInterval(scroll, speed);
function scroll() {
h = (h - step)%uh, u.style.top = h + 'px';
}
function attr(a) {
return d.currentStyle?d.currentStyle[a]:getComputedStyle?document.defaultView.getComputedStyle(d,'').getPropertyValue(a):null;
}
}
--></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>
うん、多分レスつかんべぇ。
-
-
- 0
- 件
-
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 は、「必須」だってさぁ。
すくりぷとおふのときに、こうはんのぶぶんがみえないと、とべなよ～ぉ。
捨て名で、レスつかないとほうに、１０００点。
-
-
- 0
- 件
-
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;
};
-
-
- 0
- 件
-
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">
<!--
function Scroll_Div(contener,elm){
this.contener=contener;
this.elm=elm;
var gazou_height=elm.offsetHeight;
var scroll_height=contener.offsetHeight;
var scroll_count= scroll_height;
this.scroll_timer=function(step,interval){
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;
}
},interval);
}
}
// -->
</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
-
-
- 0
- 件
-
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">
<!--
function Scroll_Div(contener,elm){
this.contener=contener;
this.elm=elm;
var gazou_height=elm.offsetHeight;
var scroll_height=contener.offsetHeight;
var scroll_count= scroll_height;
this.scroll_timer=function(step,interval){
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;
}
},interval);
}
}
// -->
</script>
</head>
<body>
<div id="scroll_contener">
<ul id="gazoulist">
<li><a href="about:blank"><img src="http://static.flickr.com/66/199481236_dc98b5abb3 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/75/199481072_b4a0d09597 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/57/199481087_33ae73a8de … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/77/199481108_4359e6b971 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/58/199481143_3c148d9dd3 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/72/199481203_ad4cdcf109 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/58/199481218_264ce20da0 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/69/199481255_fdfe885f87 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/60/199480111_87d4cb3e38 … width="75" height="75"></a></li>
<li><a href="about:blank"><img src="http://static.flickr.com/70/229228324_08223b70fa … 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>
-
-
- 0
- 件
-
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">
<!--
$(function() {
$(".scroll_contener").jCarouselLite({
visible:5,
scroll: 1,
auto:100,
speed:1000,
vertical: true
});
});
// -->
</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>
-
-
- 0
- 件
-
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- Android（アンドロイド） 縦スクロールできる画像保存アプリを探しています 1 2022/12/30 20:55
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Android（アンドロイド） スクロール 2 2023/01/05 10:26
- Android（アンドロイド） スマホ画面に現れる黒いチカチカ 2 2022/11/02 03:39
- iPhone（アイフォーン） 同じ写真と動画をiOSが検出する便利な機能 写真のアルバムタブにて、画面を一番下までスクロールすると 3 2023/01/23 15:41
- その他（インターネット接続・インフラ） 電話番号についてわかる方 1 2022/05/30 20:59
- その他（読書） 出版社に要望の手紙を送りたい。 3 2023/02/12 14:29
- Chrome（クローム） Chromeの描画領域を2分割して異なるスクロール位置を同時に表示させることはできますか 1 2023/03/01 16:53
- YouTube YouTubeの動画投稿 画面のサイズ変更方法 1 2023/01/27 19:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
jQueryで、リンクURLの一致を確...
-
jQueryで同じクラス名のものを...
-
フッター上部に謎の隙間
-
アップロードファイルの種類に...
-
HTMLで条件分岐はできますか？
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
Javascript初心者｜jQueryの.va...
-
CSS ＜div＞の入れ子が反映さ...
-
createElementで作成した要素を...
-
【javascript で動的に a タグ...
-
画面が真っ白になるのはどうして？
-
日替わりで画像を変更したい
-
背景色を透明化
-
ボタンを押すたびに交互に切り...
-
【短い】1つだけ展開/表示/非表...
-
jQueryでサーバー上のファイル...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
html5に変えるとスライドショー...
-
【iOS及びAndroid】リンク画像...
-
アコーディオンメニューが開い...
-
画像をフェードアウト＆フェー...
-
jqueryのプラグインslickの画像...
-
横並びの画像を3枚時間差でフェ...
-
CSSでマウスオーバーした画像を...
-
[jQuery]bxSlider 一番最後と...
-
神経衰弱 順番に裏返し
-
チェックボックスと画像切替の連動
-
一定時間ごとに画像を切り替え...
-
複数の要素へ appendchild でき...
-
jqueryサブウィンドウにて画像...
-
Firefoxとクロームでフェードイ...
-
折り畳みメニューを使った場合...
-
fontsize.jsでhtmlの大中小の設...
-
jsでグリッドデザインのサムネ...
-
javascript 神経衰弱
おすすめ情報
