- ベストアンサー
scrollTo 関数で苦戦してます。
http://java.misty.ne.jp/scroll.htmlにある scroll関数でx軸スライドのページを作成中です。 x軸スライドはしたのですが、このスライドをループしたいのです。 <p>この中に画像１０枚</p>width=1300にも及びますが 最後まで流れてlimitまで行ったときにもう一度同じ様に自動で流れ続けるのが理想です。 今日の昼ごろからコメントアウト＆調べながら自分なりにがんばってみたのですがうまくいきませんでした。 良い方法があれば教えてください。 (※画像にはリンクを貼るためflashでは都合が悪いのです。)
- 7-ryutarou
- お礼率60% (17/28)
- JavaScript
- 回答数6
- ありがとう数1
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
逆周りは勘弁。 <!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>
その他の回答 (5)
#2じゃだめだったかぁ～ 残念。
#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の切れ目のないループ画像みたいにしたいのです。 それが無理なら画像１０読み込んだ後に画像９・画像８と逆にスクロールしたほうが見た目がましかなーと思ってるので無理そうならこちらのソースでもいいです。 よろしくお願いします。
眠れない夜は、目が回るまで！？ 最適化とかオブジェクト指向とか手抜きですが、半分ジョーク！ <!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>
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>
- redfox63
- ベストアンサー率71% (1325/1856)
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の切れ目のないループ画像みたいにしたいのです。 それが無理なら画像１０読み込んだ後に画像９・画像８と逆にスクロールしたほうが見た目がましかなーと思ってるので無理そうならこちらのソースでもいいです。 よろしくお願いします。
お礼
あら・・・ １ページで出来ちゃったんですか・・・ メモリー量も少なくすみますし、このプログラムいいですね！ ありがとうございます。 逆回りはしませんが、十分です！ぜひ採用させてもらいます。