- 締切済み
ページスクロールの繰り返しと巻き戻し
ページを横スクロールさせるために下記のように記述しました。 最後まで行ったら最初に戻ってスクロールを繰り返させるには、何を足してあげればいいのでしょうか？ また、最後まで行ったら巻き戻して繰り返すことは可能でしょうか？ 具体的に教えていただければありがたいです。 よろしくお願いします。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <TITLE>page</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function PageScroll(){ window.scrollBy(1,0); } setInterval(PageScroll,20); //--> </SCRIPT> </HEAD> <BODY> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD> <IMG src="1.jpg"><IMG src="2.jpg"> </TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- kirions
- お礼率60% (3/5)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- leap_day
- ベストアンサー率60% (338/561)
こんにちは <script type="text/javascript"><!-- i=0; function PageScroll(){ i = i+5; h = document.getElementById("table").clientWidth - document.body.clientWidth; if(i >= h) { i=0; clearInterval(Times); setTimeout("setscrol()",2000); return false; } scrollTo(i,0); } function setscrol() { Times = setInterval("PageScroll()",20); } setscrol(); //--></script> <table border="0" cellpadding="0" cellspacing="0" id="table" style="position:absolute;width:***px;"> <tbody> <tr> <td> <img src="******" alt="***"> <img src="******" alt="***"> </td> </tr> </tbody> </table> i = i+5; で移動させる距離を決めてください(例は5pxずつ移動） setTimeout("setscrol()",2000); でスクロール後の止まっている時間を指定(例は2秒停止) <table style="width:***px;">は画像を確実に並べる為に必要です(ブラウザによっては2段、3段になることがある） ※もしかしたらNetscapeでは動かないかも（－－；） IE6,Firefox2,Opera9で確認済み [リバーススクロール] <script type="text/javascript"><!-- i=0; function PageScroll(){ i = i+5; h = document.getElementById("table").clientWidth - document.body.clientWidth; if(i >= h) { clearInterval(Times); RTimes = setInterval("ReverseScroll()",20); return false; } scrollTo(i,0); } function ReverseScroll(){ i = i-5; if(i <= 0) { clearInterval(RTimes); Times = setInterval("PageScroll()",20); return false; } scrollTo(i,0); } Times = setInterval("PageScroll()",20); //--></script> ※scrollBy()でもできると思うけどこっちを先に思いついちゃったのでそちらの方は他の方にお任せします（－－；）
- HIRSYU
- ベストアンサー率51% (45/87)
やり方がスマートでない気がするのですが以下のやりかたで出来ます。 1.スクロールさせる（scrollBy実行）前の、現在のスクロール値を保存。 2.スクロールさせる（scrollBy実行） 3.保存した値と、現在のスクロール値を比較。変更が無ければ最後までスクロール済みと判断する。 ソースはこんな感じ function PageScroll(){ var oldScroll = document.body.scrollLeft; window.scrollBy(1,0); if(oldScroll == document.body.scrollLeft){ document.body.scrollLeft = 0; } } 動き的に変なところもあるので、そのあたりは適当に修正してください。 （最後までいった瞬間に最初に戻るので、最後が一瞬しか映らないとか）
補足
HIRSYUさん、leap_dayさん、ありがとうございます。 投稿した後すぐにscrollBy()の方法を見つけたのですが、取り消しができなかったので申し訳ありません。 ＜下記＞のようにしてみたのですが、やりたいことはほかにもあり、具体的には、 http://www.rakuten.ne.jp/gold/tokyo-bag/ などで使われているMARQUEEのような簡単な、画像指定とリンクやマウスオンでの動きを、シンプルな記述で再現できないかということです。 こんなのがというものがありましたら＜下記＞には構わず教えて下さい。よろしくお願いします。 ＜下記＞ <SCRIPT Language="JavaScript"> setTimeout("sc()",100) ; var scdata1 = 0 ; var scdata2 = 0 ; function sc() { if (scdata2 == 0) {scrollBy(2,0) ; scdata1++ ; } ; if (scdata2 == 1) {scrollBy(-2,0) ; scdata1-- ; } ; if (scdata1 <= 0) { scdata2 = 0} ; if (scdata1 >= 600) { scdata2 = 1} ; setTimeout("sc()",40) ; } // --> </SCRIPT>