- 締切済み
ページスクロールの繰り返しと巻き戻し
ページを横スクロールさせるために下記のように記述しました。 最後まで行ったら最初に戻ってスクロールを繰り返させるには、何を足してあげればいいのでしょうか？ また、最後まで行ったら巻き戻して繰り返すことは可能でしょうか？ 具体的に教えていただければありがたいです。 よろしくお願いします。 <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; } } 動き的に変なところもあるので、そのあたりは適当に修正してください。 （最後までいった瞬間に最初に戻るので、最後が一瞬しか映らないとか）
関連するQ&A
- エラーが起きてしまいます
アルバムページを作ろうと思っていたのですが どこが、どう間違っているのでしょうか？ 一応表示はできていると思うのですが… <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language=javascript> var prevObj = null function chBorder(elem,color) { if(prevObj != null) { prevObj.style.borderColor = "#ffffff" } prevObj = elem elem.style.borderColor = color } </SCRIPT> </HEAD> <BODY> <TABLE> <TBODY> <TR> <TD> <IMG onclick="myImg1.src=this.src" src="1.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="2.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="3.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="4.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="5.jpg" width="60"> </TD> </TR> <TR> <TD align="center"> <IMG id="myImg1" src="0.jpg" width="300"> </TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- 締切済み
- JavaScript
- 連続したonclick
<table> <tr> <td><img src="a001.jpg" onclick="document.body.style.backgroundImage = 'url(a001.jpg)'"></td> <td><img src="a002.jpg" onclick="document.body.style.backgroundImage = 'url(a002.jpg)'"></td> <td><img src="a003.jpg" onclick="document.body.style.backgroundImage = 'url(a003.jpg)'"></td> </tr> </table> ******************************* １ 背景画像の切り替え画像サンプルをつくりました。 これが何十行も連続します。 CSSみたいに同じ内容が重複するときにclassで分類するみたいに、 Javascriptでも簡素化する方法はないでしょうか？ ＜HEAD＞＜/HEAD＞内には <meta http-equiv="Content-Script-Type" content="text/javascript"> しか書いていません。（Javascriptは初心者です） ２ document.body.style.backgroundColor='#ffffff'; backgroundImageとかbackgroundColorの 後方のImageとかColorの頭文字は大文字でも良いのでしょうか？
- ベストアンサー
- JavaScript
- tableを自動作成・追加できるプログラムを探しているのです・・
<table> <tbody> <tr> <td colspan="9" align="center" </TD></td> </tr> <tr> <td colspan="9" <A href="http:// target=" _blank"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td rowspan="3"></td> <td></td> <td><img src=".jpg"></td> <td></td> <td> <table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </td> <td></td> <td><img src=".jpg"></td> <td><img src=".jpg"></td> <td></td> </tr> <tr> <td></td> <td><img src=".jpg"></td> <td></td> <td> <table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </td> <td></td> <td><img src=".jpg"></td> <td><img src=".jpg"></td> <td></td> </tr> <tr> <td></td> <td><img src=".jpg"></td> <td></td> <td> <table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </td> <td></td> <td><img src=".jpg"></td> <td><img src=".jpg"></td> <td></td> </tr> <tr> <td><img src=".jpg"></td> </tr> </tbody> </table> こんなtableを作成し（tdには数値・文字列・画像が入ります）一つのhtmlファイルに一ヶ月に10個ほど手動でtableを追加しています。 これを入力フォームより数値や文字列・参照画像を入力し、月ごとのhtmlにしてるので、指定したhtmlに反映させるようなプログラム（cgi? javascript? PHP?）をご存じの方いらっしゃいませんでしょうか？
- 締切済み
- HTML
- スタイルシートについて
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD><IMG src="i1.gif" width="64" height="64" border="0"></TD> <TD><IMG src="i2.gif" width="64" height="64" border="0"></TD> </TR> <TR> <TD><IMG src="m1.gif" width="32" height="32" border="0"></TD> <TD><IMG src="m2.gif" width="32" height="32" border="0"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> こういったTableを使った表がある場合、スタイルシートで示すことは出来ますか？もし出来るならそのソースを教えてください。 また、こういったTableのホームページを一括でスタイルシートに変換できるソフトが存在していたら教えてください。 それと、この行数がかなり大きくなると、Tableよりも軽く表示がされると聞いたのですが本当でしょうか？ ご返答、何卒、よろしくお願い致します。
- ベストアンサー
- HTML
- [JavaScript]Table内の文字列書換
下記のようにTableを作り、上に場所名、下に画像を貼り JavaScriptで反時計回りに定期的に場所名と画像の位置を変えるプログラムを作成しています。 画像位置を変えることはできたのですが、文字列を変えることができません。 どなたかご教示ください。 ===================================== | 場所A | 場所B | ================= =================== | | | | | 画像B | | | | | 画像 A =================== | | 場所C | | =================== | | | | | 画像C | | | | | =================== | | 場所D | | =================== | | | | | 画像D | | | | ===================================== <HTML> <HEAD> <TITLE>TEST</TITLE> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=UTF-8"> <META HTTP-EQUIV="refresh" CONTENT="50"> </HEAD> <BODY BGCOLOR="000000" TEXT="#FFFFFF"> <table ALIGN="CENTER" border="5" > <tr><td>A</td><td>B</td></tr> <tr><td rowspan=5><IMG SRC="A.jpg" NAME="SP1"><SCRIPT language="javaScript"> <!-- var NO1=1,NO2=2,NO3=3,NO4=4; img=new Array(4) img[1]="A.jpg" img[2]="B.jpg" img[3]="C.jpg" img[4]="D.jpg" UP(); function UP() { setTimeout("UP()",10000); document.SP1.src=img[NO1]; document.SP2.src=img[NO2]; document.SP3.src=img[NO3]; document.SP4.src=img[NO4]; NO1++; NO2++; NO3++; NO4++; if(NO1>4){NO1=1;} if(NO2>4){NO2=1;} if(NO3>4){NO3=1;} if(NO4>4){NO4=1;} } //--> </SCRIPT> </td> </td> <td><IMG SRC="B.jpg" NAME="SP2"</td></tr> <tr><td">C</td></tr> <tr><td><IMG SRC="C.jpg" NAME="SP3"></td></tr> <tr><td>D</td></tr> 一部省略 </table> </body> </ht
- 締切済み
- JavaScript
- 文字をオンマウスすると、画像がかわり、クリックで他のページへいくようにしたい。
初めてJavaを使いました。 『文字にマウスを当てると、上に置いた画像がかわり、さらにその文字をクリックすると、他のページにいくようにしたいのです』 文字にマウスを当てると、上に置いた画像が変わるとこまではできましたが、どうしても他のページへのリンクができません。 よい方法を教えてください。 作ったHTMLは以下のとおりです。 <SCRIPT language="JavaScript"><!-- function myChgPic(myPicURL){ document.images["myBigImage"].src = myPicURL; } // --></SCRIPT> <TABLE align="center"> <TBODY> <TABLE border="0" align="center"> <TBODY> <TR> <TD><IMG src="ankor.jpg" name="myBigImage" border="2"></TD> </TR> <TR> <TD><A href="javascript:void(0)" onmouseover="myChgPic('shanghai.jpg')">上海 <br> <A href="javascript:void(0)" onmouseover="myChgPic('italy.jpg')">イタリア <br> <A href="javascript:void(0)" onmouseover="myChgPic('canada.jpg')">カナダ </A> </TD> </TR> </TBODY> </TABLE> 上海、カナダ、イタリアという文字をクリックしたら、その写真にかわり、文字をクリックしたらそれぞれのページにリンクさせたいのです。
- 締切済み
- JavaScript
- HTMLページに外部テキストファイルを取り込むには？
HTMLのページに、一部だけ外部ファイルのデータを取り込もうとしています。 <HTML> <BODY> <P><TABLE WIDTH="450" > <TR> <TD><IMG SRC="picture1.jpg"></TD> <TD >ここにJavascriptで自由更新文（１）を入れる</TD> </TR> </TABLE><BR> <TABLE WIDTH="450"> <TR> <TD><IMG SRC="picture2" ></TD> <TD>ここにJavascriptで自由更新文（2）を入れる</TD> </TR> </TABLE> </BODY> </HTML> 上のような、写真と説明文がセットになったテーブルがいくつか配置されているページがあるとします。 その説明文を、HTMLを見たこともない人物に自由に更新してもらわねばなりません。 そこで、例えば「１つめの写真の説明文は1.dat、２つめの写真の説明文は2.dat …と、単純にテキストだけを打った.datとか.txtファイルをサーバにアップロードしてもらい、htmlページはJavascriptでその.datファイルをテーブル内に読み込むようにして使いたいのですが、そのJavascriptはどんな書き方をすればよいでしょうか？ <script type="text/javascript" src="1.js"></script>といったように読み込む場合、1.jsの内容は単純なテキストでなく document.write("これは例文です。"); // End といったように、ソースになっていなければダメですよね？ これでは間違って「"」等を消されたらファイルが壊れてしまいます。このため、こういう内容でなく、「document.write("」や「");」や「// End 」も無い、単純なテキストだけを外部ファイルにすることはできないでしょうか？
- ベストアンサー
- JavaScript
- マウスカーソルを乗せた時にテーブルの行の色を変える
マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて 以下のようにCSSとHTMLを書いてみました。 しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。 【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
- Javascriptでテーブルタグの座標が知りたい（但し、マウスでなく）
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>JavaScriptテスト</title> <script type="text/javascript"> <!-- document.onmousedown = msDown //----------------------------------------------------------------------------- // マウスで座標を取得する //----------------------------------------------------------------------------- function msDown(){ var x = event.x; var y = event.y; alert('x=[' + x + '] y=[' + y + ']'); } // --> </script> </head> <body> テーブルタグの<TD>で左上側の画面上の位置の座標位置を取得したいです。 offsetLeftやoffsetTopでは、例えばテーブルタグの上側に<p>がある場合と無い場合でも同じ値でした。 正しく取得する方法はありますか？ <hr> <table cellspacing="0" cellpadding="2" border="1" bgcolor="black"> <tbody> <tr> <td><img src="" width="100" height="100"></td> <td bgcolor="red">この赤のエリアの左上の座標が知りたい（マウスイベントで調べられるが、それを使わずに調べたい） </td> </tr> <tr> <td>456</td> <td><img src="" width="50" hright="50"></td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- JavaScript
- クリックすると横にスムーズスクロールするもの
いつもお世話になっております。 何度かこの質問をさせて頂いたのですが、また挑戦しているので教えて下さい。 ※長文です。 矢印をクリックすると下の「内容」というテーブルが左右にスムーズスクロールするものを作りたいと思っています。 分かりやすく言うとアップルの動画のページのようなjavascriptを組みたいのです。 ┌──┐ ← │内容│ → └──┘ 今やってみているのは 以下のURLのマウスオーバーでテーブルの内容が上下にスクロールするというものを マウスオーバーではなくクリックにして、上下スクロールではなく左右のスクロールにする。 http://www.makoto3.net/softbank/fix/ss063/ss063.html onclickにしてもマウスオーバーのイベントが残っている感じでマウスが乗っている間はスクロールしていまいます。 次に http://www.akikobrand.com/html/index.html こちらの「Javascriptで横スクロールさせる」を作り替えて </script> </head>以降を <a HREF='#'>→</a> <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> <div style="overflow:auto;width:100px;"> <table border="1" cellpadding="0" cellspacing="0" width="1800"> <tr> <td width="600"><img src="001.jpg" border="0"> </td> <td width="600" valign="bottom"><a name="javascript:slidePage(true,0,600)"></a> <img src="002.jpg" border="0"> </td> <td valign="bottom"><img src="003.jpg" border="0"> </td> </tr> </table> </div> としてみましたが、スムーズスクロールにならないのと、矢印のクリックが一度しかききません。 これをクリックする毎に右へ移動するようにしたいです。 この場合どちらを使えば良いか、またその場合どうすればいいかどなたか宜しくお願い致します。
- 締切済み
- JavaScript
補足
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>