• ベストアンサー

JavaScriptでスライドページを作る

JavaScriptでスライドページを作りたいの ですが <SCRIPT language=JavaScript> <!-- function cc(slide) { dis=Math.abs(600/slide); while(dis>0) { dis--; scrollBy(slide,0); } } //--> </SCRIPT> ↑だと横にスクロールが出来るのですが 下にスクロールさせるにはどのように すればよいのでしょうか? どなたかご教授お願いしますm(_ _)m

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

scrollBy(slide,0); の0に適当な数値を入れてください。元の関数の横にスライドした分を縦にスライドするように変えるだけなら scrollBy(0,slide); ですね。 あと、ご存知だと思いますが dis=Math.abs(600/slide); の 600の部分は最終的にスライドする量に影響しますね。当然数字が大きいほどスライドする量が大きいです。

hirofuji
質問者

お礼

お返事が遅れてしまい申し訳ございません! 有難うございました^^ 早速試してみたいと思います。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • ページ読み込み時に自動でスクロール

    <body>にonloadを記述する方法以外で あるページを読み込んだ時に、自動的にページ最下部へ スクロールさせたいのですが 以下コードを記述してもエラーも起こらず、何も起きませんでした。 <script type="text/javascript" language="javascript"> <!-- window.onload = new function(){ window.scrollBy(0,300) }; window.onload = new function(){ alert("aaa") }; // --> </script> ちなみに、下側のalertは問題なく動作しております。 scrollby以外でのスクロールでもいいので、ご存じの方教えて下さい。 (できれば一瞬でスクロールする方がいいです。)

  • ページスクロールの繰り返しと巻き戻し

    ページを横スクロールさせるために下記のように記述しました。 最後まで行ったら最初に戻ってスクロールを繰り返させるには、何を足してあげればいいのでしょうか? また、最後まで行ったら巻き戻して繰り返すことは可能でしょうか? 具体的に教えていただければありがたいです。 よろしくお願いします。 <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>

  • javascriptでスライドするページの作成

    はじめまして。 ホームページを作成しているものです。 先日就航した全日空787のホームページのデザインが気に入って このようにページを横にスクロールして見せたいと思いました。 私はjavascriptのコードを一から書く知識がないので このような表現を代用できるテンプレートがあるのかご存知の方がいらっしゃいましたら お聞きしたいと思い投稿致しました。 参照サイト 全日空の787型機のオフィシャルサイト http://www.ana.co.jp/promotion/b787/mwj/ 細かい点になりますが、 ・javascriptページ内のテキストの縦のスクロールする方法 ・javascriptページにリンクを貼る方法→スライドするページは1枚の画像で制作する方法は試したことがあるのですが参照サイトのように、他のページへのリンクボタン、YouTubeへのリンクボタンを埋め込む方法が分かりません。 ・javascriptページ下のナビゲーションボタン(クリックすると伸びて、各ページの小さい画像が現れる)の作り方 も合わせてお分かりになりましたらどうぞよろしくお願い致します。

  • JavaScriptでページを一度だけリロード

    とあるページにアクセスした際、JavaScript(jQuery)を使って一度だけページをリロードしたいと思っております。 <script language="JavaScript"><!-- function reload() { if (window.name != "test") { location.reload(); window.name = "test"; } } // --></script> 上記のような記述で試みたのですが、リロードしてくれません。 他に対応できる方法がございましたら、ご教授いただけますと幸いです。 以上、よろしくお願い致します。

  • JavaScriptのソースについて

    マウスでクリックすると画像やテキストがスライドするようなサイトを作りたいのですが、 JavaScriptのソースがうまく機能しません。 いろいろ調べたり、試したりしたのですが、解決しなかったのでご回答頂けれと思います。 <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.flow.1.2.min.js"></script> <script language="javascript" type="text/javascript"> <!-- $(document).ready(function(){ $("#myController_h").jFlow({ slides: ".loves_slide_h", controller: ".jFlowControl_h", // must be class, use . sign slideWrapper : "#jFlowSlide_h", // must be id, use # sign selectedWrapper: "jFlowSelected", // just pure text, no sign width: "680px", height: "250px", duration: 400, prev: ".jFlowPrev_h", // must be class, use . sign next: ".jFlowNext_h" // must be class, use . sign }); }); //--> </script> ソースはこんな感じで作ってみたのですが、お分かりになる方がいらっしゃいましたらよろしくお願い致します。

  • Javascriptで開いたWindowのスクロール

    <SCRIPT language="JavaScript"><!-- function openWin2() { window.open("http://www.OOOO/hanbai.htm","通信販売法","width=636,height=250,menubar=no,location=no,left=10,top=30") } // --></SCRIPT> <SCRIPT language="JavaScript"><!-- function openWin1() { window.open("http://www.OOOO/souryou.htm","送料について","width=579,height=240,scrollbars=no,location=no,menubar=no,left=10,top=30") } // --></SCRIPT> 上記の文で、「送料について」はスクロールバーがなくて OKなのですが、 「通信販売法」は、スクロールバーを出したいのですが、 上の文では、スクロールバーは出てきません。 (表示サイズで途切れてしまう) どう直せば、スクロールバーが出てきますでしょうか??

  • CSS + Javascript でスライドショー

    手動で画像を順番に表示させる、スライドショーのような表現を作ろうとしています。 色々なサイトを参考に見よう見まねで作成してみたのですが、 途中でうまくいかずに行き詰っております(´・ω・`) [XHTML] <body onload="seltab(0)"> <!-- 順番に表示させる内容 --> <div id="slide" name="slide"><p>1</p></div> <div id="slide" name="slide"><p>2</p></div> <div id="slide" name="slide"><p>3</p></div> <div id="slide" name="slide"><p>4</p></div> <div id="slide" name="slide"><p>5</p></div> <!-- ページ切り替え操作部分 --> <a href="javascript:seltab(-10000)">first</a> <a href="javascript:seltab(-1)">back</a> <a href="javascript:seltab(1)">next</a> <a href="javascript:seltab(10000)">last</a> [Javascript] var selected = 0; function seltab(move) { o = document.getElementsByName("slide"); selected = selected + move; if (selected < 0) {selected = 0} if (selected >= o.length) {selected = o.length - 1} for (i = 0; i < o.length; i++) { if (i == selected) { o[i].style.display = "block"; } else { o[i].style.display = "none"; } } } このやり方で一応動作はしています(WIN IE + WIN Firefox にて確認) が、id が同じページ内で重複している点と、div に name を付ける点で、構文チェックに引っ掛かってしまう為、できればそれを回避したいなと思っています。 同じ動作が作れれば、Javascript の処理方法に特に拘りはありません。 お分かりになる方がいらっしゃれば、ぜひぜひご指導お願いします。

  • マウスでページを横スクロールさせる方法

    縦方向にスクロールさせることはできましたが横スクロールの方法がどうしてもわかりません。 縦スクロールのやり方も下のスクリプトより簡素化できますでしょうか? <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function mScroll(){ scrollTo (0,(document.body.scrollHeight-document.body.clientHeight)*event.y/document.body.clientHeight); } </SCRIPT> </HEAD> <BODY onmousemove="mScroll()"> </BODY> </HTML>

  • JavaScript内にJavaScriptを読み込む方法

    HTML内に <script type="text/javascript" src="main.js"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = '<script language="JavaScript">'; html += 'var url0101 = "url01.xxx.jp";'; html += 'var url02 = "url02.oooo.jp";'; html += '</script>'; html += '<script language="JavaScript" src="http://xxx.xxxx.xxx/test.js"></script>'); html += '<script language="JavaScript">'; html += 'Function01("check")'; html += '</script>'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか? よろしくお願いします。

  • JavaScript内にJavaScriptを読み込む方法

    HTML内に <script type=\"text/javascript\" src=\"main.js\"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = \'<script language=\"JavaScript\">\'; html += \'var url0101 = \"url01.xxx.jp\";\'; html += \'var url02 = \"url02.oooo.jp\";\'; html += \'</script>\'; html += \'<script language=\"JavaScript\" src=\"http://xxx.xxxx.xxx/test.js\"></script>\'); html += \'<script language=\"JavaScript\">\'; html += \'Function01(\"check\")\'; html += \'</script>\'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか? よろしくお願いします。