重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【解消】通知が届かない不具合について

scrollTo 関数で苦戦してます。

解決済

  • 質問者：7-ryutarou
  • 質問日時：
  • 回答数：6件

http://java.misty.ne.jp/scroll.htmlにある
scroll関数でx軸スライドのページを作成中です。
x軸スライドはしたのですが、このスライドをループしたいのです。
<p>この中に画像１０枚</p>width=1300にも及びますが
最後まで流れてlimitまで行ったときにもう一度同じ様に自動で流れ続けるのが理想です。
今日の昼ごろからコメントアウト＆調べながら自分なりにがんばってみたのですがうまくいきませんでした。
良い方法があれば教えてください。
(※画像にはリンクを貼るためflashでは都合が悪いのです。)

通報する

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

質問の本文を隠す

A 回答 (6件)

No.6ベストアンサー

  • 回答者： _pipi_
  • 回答日時：

逆周りは勘弁。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>scorollサンプル</title>
<style type="text/css">
　#waku0 { text-align:center; }
　#waku1 { width:600px; height:250px; overflow:auto; border:5px ridge silver; text-align:left;}
　#waku1 img { padding-left:20px; padding-top:30px;}
</style>

<body>
<div id="waku0">
<div id="waku1">
　<img src="products/img/img1.jpg" width="120" height="180" alt="画像1" />
　<img src="products/img/img2.jpg" width="120" height="180" alt="画像2" />
　<img src="products/img/img3.jpg" width="120" height="180" alt="画像3" />
　<img src="products/img/img4.jpg" width="120" height="180" alt="画像4" />
　<img src="products/img/img5.jpg" width="120" height="180" alt="画像5" />
　<img src="products/img/img6.jpg" width="120" height="180" alt="画像6" />
　<img src="products/img/img7.jpg" width="120" height="180" alt="画像7" />
　<img src="products/img/img8.jpg" width="120" height="180" alt="画像8" />
　<img src="products/img/img9.jpg" width="120" height="180" alt="画像9" />
　<img src="products/img/img10.jpg" width="120" height="180" alt="画像10" /></p>
</div>
<p>
<input type="button" value="開始/停止" id="bt0">
<input type="button" value="戻る" id="bt1">
</p>
</div>
<script type="text/javascript">

//@cc_on
//全角空白はタブまたは半角空白に置き換えのこと

window./*@if(@_jscript)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function () {

　function RevolvingImage() {
　　this.init.apply(this, arguments);
　}

　RevolvingImage.prototype.init = function (elementId, step, interval) {
　　var count, e, o, s, x;
　　
　　e = document.getElementById(elementId);
　　this.step = step;
　　this.wtime = interval;
　　this.listx = [];
　　this.list = e.getElementsByTagName('IMG');
　　this.max = 0;
　　this.flag = false;
　　s = e.style;
　　s.overflow = 'hidden';
　　s.position = 'relative';

　　count = x = 0;
　　while (o = this.list[count++]) {
　　　o.style.position = 'absolute';
　　　o.style.left = x +'px';
　　　this.listx.push(x);
　　　if (this.max < x) this.max = x;
　　　x += o.offsetWidth;
　　}
//　　this.start();
　};

　RevolvingImage.prototype.move = function () {
　　var count = 0, o, p;
　　while (o = this.list[count]) {
　　　p = this.listx[count] + this.step;
　　　if (p <= -o.offsetWidth) p = this.max;
　　　this.listx[count++] = p;
　　　o.style.left = p +'px';
　　}
　　this.flag && setTimeout((function(cb_){ return function(){ cb_.move(); }; })(this), this.wtime);
　};
　RevolvingImage.prototype.start = function () { return !this.flag && this.move(this.flag = true) };
　RevolvingImage.prototype.stop = function () { return this.flag = false; };

　var w = new RevolvingImage('waku1', -1, 25);
　
　document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function (evt) {
　　var i = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/.id;
　　if (!i) return;
　　if ('bt0' == i) w.flag ? w.stop(): w.start();
　}, false);
}, false);

</script>
    • good
    • 0
    • 件
通報する
この回答へのお礼

あら・・・
１ページで出来ちゃったんですか・・・
メモリー量も少なくすみますし、このプログラムいいですね！
ありがとうございます。
逆回りはしませんが、十分です！ぜひ採用させてもらいます。

通報する
お礼日時：2009/03/31 22:40

No.5

  • 回答者： _pipi_
  • 回答日時：

#2じゃだめだったかぁ～　残念。

    • good
    • 0
    • 件
通報する

No.4

  • 回答者： _pipi_
  • 回答日時：

#3です。

　アンカータグが効いてません！
見なかったことに！
忘れてください！

この回答への補足

説明不足でした。
作っているソースも書きます。

実際表示されるページ.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>scorollサンプル</title>
</head>
<body>
<!-- contents -->
<!-- スクロールサンプル -->
<center>
- - スクロール - -
</center>
<table align="center" cellspacing="0" cellpadding="0" style="border:5px ridge silver">
<tr>
<td><iframe src="scroll_sample1.html" name="scroll" width="600" height="250" scrolling="no" frameborder="1"></iframe></td>
</tr>
</table>
<br>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td><input type="button" value="開始/再開" onClick="scroll.scroll('on')">
<input type="button" value="停止" onClick="scroll.scroll('stop')">
<input type="button" value="戻る" onClick="scroll.scroll('reset')">
<input type="button" value="<" onClick="scroll.scroll('right')">
<input type="button" value=">" onClick="scroll.scroll('left')"></td>
</tr>
</table>
<!-- /contents -->
</body>
</html>

scroll_sample1.html(背景でこれを動かしてます)
<html>
<head>
<title>test java</title>
<style type="text/css">
<!--
BODY {
margin:0;
padding:0;
}
.subject {
font-size: 12pt;
font-weight: bold;
font-family: Verdana, Arial, sans serif;
}
.name {
font-size: 11pt;
}
-->
</style>
<script language="JavaScript">
<!--
x = 0; // 移動距離初期値
limit = 1280; // 移動距離限界値
timerID = null; // タイマ変数初期化
move = 4; // 移動量
speed = 100; // 移動スピード
flag = 0;

function scroll( mode ) {

if (mode == 'stop') {
clearTimeout(timerID); }

else if (mode == 'reset'){
speed = 100;
scrollTo(0,0);
x = 0;
clearTimeout(timerID); }

else if (mode == 'left'){
if (speed - 30 > 0) { speed -= 30; }
if (x < limit) {
scrollTo(x+=move,0 );
clearTimeout(timerID);
timerID = setTimeout("scroll('on')", speed); } }

else if (mode == 'right'){
speed += 30;
if (x <limit) {
scrollTo(x+=move,0);
clearTimeout(timerID);
timerID = setTimeout("scroll('on')", speed); } }


else {
if (x < limit) {
scrollTo(x+=move, 0);
clearTimeout(timerID);
timerID = setTimeout("scroll('on')", speed);
}

}
}
-->
</script>
</head>
<body >

<div style="padding-top:30px; width:1300px; border:1px solid gray;">
<p>
<img src="products/img/img1.jpg" width="120" height="180" alt="画像1" />
<img src="products/img/img2.jpg" width="120" height="180" alt="画像2" />
<img src="products/img/img3.jpg" width="120" height="180" alt="画像3" />
<img src="products/img/img4.jpg" width="120" height="180" alt="画像4" />
<img src="products/img/img5.jpg" width="120" height="180" alt="画像5" />
<img src="products/img/img6.jpg" width="120" height="180" alt="画像6" />
<img src="products/img/img7.jpg" width="120" height="180" alt="画像7" />
<img src="products/img/img8.jpg" width="120" height="180" alt="画像8" />
<img src="products/img/img9.jpg" width="120" height="180" alt="画像9" />
<img src="products/img/img10.jpg" width="120" height="180" alt="画像10" /></p>
</div>
</body>
</html>

このscroll_sample1.htmlの画像１０を読み終わったあとすぐに画像１が表示されてほしいのです。
画像１０が読み終わったとたんscrollto(0,0)で戻ると見た目があまりよくないの感じがするのでflashの切れ目のないループ画像みたいにしたいのです。
それが無理なら画像１０読み込んだ後に画像９・画像８と逆にスクロールしたほうが見た目がましかなーと思ってるので無理そうならこちらのソースでもいいです。

よろしくお願いします。

補足日時：2009/03/30 20:34
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： _pipi_
  • 回答日時：

眠れない夜は、目が回るまで！？


最適化とかオブジェクト指向とか手抜きですが、半分ジョーク！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Scroll images</title>
<style type="text/css">
#waku0 { overflow:auto; width:600px; height:90px; border:1px red solid;}
#waku0 a img { border:0px none; width:120px; height:90px; }

#waku1 { overflow:auto; width:600px; height:90px; border:1px blue solid;}
#waku1 a img { border:0px none; width:120px; height:90px; }
</style>
<div id="waku0">
　<a href="htp://ww.test.jp"><img src="./img/0.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/1.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/2.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/3.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/4.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/5.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/6.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/7.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/8.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/9.gif" alt="*"></a>
</div>
<div id="waku1">
　<a href="htp://ww.test.jp"><img src="./img/0.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/1.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/2.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/3.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/4.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/5.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/6.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/7.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/8.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/9.gif" alt="*"></a>
</div>
<script type="text/javascript">
//@cc_on
//全角空白はタブまたは半角空白に置き換えのこと

(function (init) {
　/*@if(@_jscript)
　　document.attachEvent && attachEvent('onload', init);
　@else@*/
　　document.addEventListener && addEventListener('load', init, false);
　/*@end@*/
})(function () {
　var RD = Math.PI / 180;
　function RevolvingImage() {
　　this.init.apply(this, arguments);
　}
　RevolvingImage.prototype.init = function (elementId, step, interval) {
　　var count, e, o, s;
　　
　　e = document.getElementById(elementId);
　　this.step = step;
　　this.wtime = interval;
　　this.kakudo = [];
　　this.list = e.getElementsByTagName('IMG');
　　s = e.style;
　　s.overflow = 'hidden';
　　s.position = 'relative';
　　this.n = this.list.length;
　　this.r = e.offsetWidth*0.53;
　　for (count = 0; count < this.n; count++) {
　　　this.list[count].style.position = 'absolute';
　　　this.kakudo.push((360/this.n)*count);
　　}
　　this.start();
　};
　RevolvingImage.prototype.start = function () {
　　var c, x0, x1, s, z;
　　for (c = 0; c < this.n; c++) {
　　　x0 = Math.sin(this.kakudo[c]*RD) * this.r |0;
　　　x1 = Math.sin((this.kakudo[c]+360/this.n)*RD) *this.r |0;
　　　z = Math.cos(this.kakudo[c]*RD) * this.r |0;
　　　s = this.list[c].style;
　　　s.left = 300+x0 + 'px';
　　　s.width = (Math.abs(x1-x0))+'px';
　　　s.zIndex = z;
　　　this.kakudo[c]+=this.step;
　　}
　　setTimeout((function(cb_){ return function(){ cb_.start(); }; })(this), this.wtime);
　}
　new RevolvingImage('waku0', -2, 50)
　new RevolvingImage('waku1', 2, 25)
});

</script>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： _pipi_
  • 回答日時：

scrollTo()は使っていませんが・・・



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Scroll images</title>
<style type="text/css">
#waku0 { overflow:auto; width:600px; height:90px; border:1px red solid;}
#waku0 a img { border:0px none; width:120px; height:90px; }

#waku1 { overflow:auto; width:600px; height:90px; border:1px blue solid;}
#waku1 a img { border:0px none; width:120px; height:90px; }
</style>
<div id="waku0">
　<a href="htp://ww.test.jp"><img src="./img/0.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/1.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/2.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/3.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/4.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/5.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/6.gif" alt="*"></a>
</div>
<div id="waku1">
　<a href="htp://ww.test.jp"><img src="./img/0.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/1.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/2.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/3.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/4.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/5.gif" alt="*"></a>
　<a href="htp://ww.test.jp"><img src="./img/6.gif" alt="*"></a>
</div>
<script type="text/javascript">
//@cc_on
//全角空白はタブまたは半角空白に置き換えのこと

(function (init) {
　/*@if(@_jscript)
　　document.attachEvent && attachEvent('onload', init);
　@else@*/
　　document.addEventListener && addEventListener('load', init, false);
　/*@end@*/
})(function () {
　function RevolvingImage() {
　　this.init.apply(this, arguments);
　}
　RevolvingImage.prototype.init = function (elementId, step, interval) {
　　var count, e, o, s, x;
　　
　　e = document.getElementById(elementId);
　　this.step = step;
　　this.wtime = interval;
　　this.listx = [];
　　this.list = e.getElementsByTagName('A');
　　this.max = 0;
　　s = e.style;
　　s.overflow = 'hidden';
　　s.position = 'relative';

　　count = x = 0;
　　while (o = this.list[count++]) {
　　　o.style.position = 'absolute';
　　　o.style.left = x +'px';
　　　this.listx.push(x);
　　　if (this.max < x) this.max = x;
　　　x += o.offsetWidth;
　　}
　　this.start();
　};
　RevolvingImage.prototype.start = function () {
　　var count = 0;
　　var o, p;
　　while (o = this.list[count]) {
　　　p = this.listx[count] + this.step;
　　　if (p <= -o.offsetWidth) p = this.max;
　　　this.listx[count++] = p;
　　　o.style.left = p +'px';
　　}
　　setTimeout((function(cb_){ return function(){ cb_.start(); }; })(this), this.wtime);
　}
　new RevolvingImage('waku0', -1, 50)
　new RevolvingImage('waku1', -2, 25)
});

</script>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： redfox63
  • 回答日時：

limitとxを比較している部分にelse節を追加するだけなのでは ...



function scroll() {
　// ページのy 座標が limit を越えていなければスクロールを行う
if (x < limit) {
　　// リミット以内ならスクロール
　　x += move;
　} else {
　　// リミットを越えたらリセット
　　x = 0;
　}
　// ページをスクロールする
　scrollTo(x, 0);

　// タイマーをリセットする
　clearTimeout(timerID);

　// タイマーを再起動する
　timerID = setTimeout("scroll()", speed);
}
といった具合で ...

この回答への補足

説明不足でした。
作っているソースも書きます。

実際表示されるページ.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>scorollサンプル</title>
</head>
<body>
<!-- contents -->
<!-- スクロールサンプル -->
<center>
- - スクロール - -
</center>
<table align="center" cellspacing="0" cellpadding="0" style="border:5px ridge silver">
<tr>
<td><iframe src="scroll_sample1.html" name="scroll" width="600" height="250" scrolling="no" frameborder="1"></iframe></td>
</tr>
</table>
<br>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td><input type="button" value="開始/再開" onClick="scroll.scroll('on')">
<input type="button" value="停止" onClick="scroll.scroll('stop')">
<input type="button" value="戻る" onClick="scroll.scroll('reset')">
<input type="button" value="<" onClick="scroll.scroll('right')">
<input type="button" value=">" onClick="scroll.scroll('left')"></td>
</tr>
</table>
<!-- /contents -->
</body>
</html>

scroll_sample1.html(背景でこれを動かしてます)
<html>
<head>
<title>test java</title>
<style type="text/css">
<!--
BODY {
margin:0;
padding:0;
}
.subject {
font-size: 12pt;
font-weight: bold;
font-family: Verdana, Arial, sans serif;
}
.name {
font-size: 11pt;
}
-->
</style>
<script language="JavaScript">
<!--
x = 0; // 移動距離初期値
limit = 1280; // 移動距離限界値
timerID = null; // タイマ変数初期化
move = 4; // 移動量
speed = 100; // 移動スピード
flag = 0;

function scroll( mode ) {

if (mode == 'stop') {
clearTimeout(timerID); }

else if (mode == 'reset'){
speed = 100;
scrollTo(0,0);
x = 0;
clearTimeout(timerID); }

else if (mode == 'left'){
if (speed - 30 > 0) { speed -= 30; }
if (x < limit) {
scrollTo(x+=move,0 );
clearTimeout(timerID);
timerID = setTimeout("scroll('on')", speed); } }

else if (mode == 'right'){
speed += 30;
if (x <limit) {
scrollTo(x+=move,0);
clearTimeout(timerID);
timerID = setTimeout("scroll('on')", speed); } }


else {
if (x < limit) {
scrollTo(x+=move, 0);
clearTimeout(timerID);
timerID = setTimeout("scroll('on')", speed);
}

}
}
-->
</script>
</head>
<body >

<div style="padding-top:30px; width:1300px; border:1px solid gray;">
<p>
<img src="products/img/img1.jpg" width="120" height="180" alt="画像1" />
<img src="products/img/img2.jpg" width="120" height="180" alt="画像2" />
<img src="products/img/img3.jpg" width="120" height="180" alt="画像3" />
<img src="products/img/img4.jpg" width="120" height="180" alt="画像4" />
<img src="products/img/img5.jpg" width="120" height="180" alt="画像5" />
<img src="products/img/img6.jpg" width="120" height="180" alt="画像6" />
<img src="products/img/img7.jpg" width="120" height="180" alt="画像7" />
<img src="products/img/img8.jpg" width="120" height="180" alt="画像8" />
<img src="products/img/img9.jpg" width="120" height="180" alt="画像9" />
<img src="products/img/img10.jpg" width="120" height="180" alt="画像10" /></p>
</div>
</body>
</html>

このscroll_sample1.htmlの画像１０を読み終わったあとすぐに画像１が表示されてほしいのです。
画像１０が読み終わったとたんscrollto(0,0)で戻ると見た目があまりよくないの感じがするのでflashの切れ目のないループ画像みたいにしたいのです。
それが無理なら画像１０読み込んだ後に画像９・画像８と逆にスクロールしたほうが見た目がましかなーと思ってるので無理そうならこちらのソースでもいいです。

よろしくお願いします。

補足日時：2009/03/30 20:14
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報