• 締切済み

JavaScriptを使って縦に画像がスクロールするページを作りたいの

JavaScriptを使って縦に画像がスクロールするページを作りたいのですが、 (こんなかんじで動く)http://www.gmarwaha.com/jquery/jcarousellite/index.php 私はまだ勉強中で、テンプレートをダウンロードして少々いじって使う程度しかできません。 テンプレートで縦に動くものをみつけたのですが http://sorgalla.com/jcarousel/ 画像や全体の幅を広げようとまずCSSで調整したら、画像は大きくなったけど、 全部縦に画像がうまく並ばず、何枚も画像が表示されるはずなのに、1枚しか表示されなくなりました。 矢印ボタンを押してスクロールさせようとすると、 表示枠は長くしてあるのに、一番上の画像が別の画像に切り替わるという感じです。 言葉だけではうまく伝わらないとは思いますが。。 一番上に記載したURLのやつを縦バージョンにする方法など、 あったら教えていただけないでしょうか? 他にも、縦にスクロールするJavascriptをご存知の方いらっしゃいましたら、教えていただけると助かります。 他力本願で大変お恥ずかしいのですが、どなたかうまく作れる方法がありましたらご協力お願いします!!

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

「jcarousellite」ですよね。何故ご提示の画像のようになっているのか ソースコードをご提示されてないのでわかりませんが、 「jcarousellite」で簡単に縦スクロールスライドできるはずですけど... <script type="text/javascript"> $(function() {    $(".scroll_contener").jCarouselLite({      visible:5,      scroll: 1,      auto:100,      speed:1000,      vertical: true    }); }); </script> ------- <div class="scroll_contener" style="float:left;">  <ul id="gazoulist">  <li><a href="javascript:void(0);"></a><img src="..."></li>  <li><a href="javascript:void(0);"></a><img src="..."></li>  <li><a href="javascript:void(0);"></a><img src="..."></li>]  --------  </ul> </div>

shi-no22
質問者

補足

回答ありがとうございます。 お返事が遅くなってすみませんでした。 画像のように変になっていたのはスタイルシートでの設定の問題という 初歩的なミスでした。 ですが、 <script type="text/javascript"> $(function() {    $(".scroll_contener").jCarouselLite({      visible:5,      scroll: 1,      auto:100,      speed:1000,      vertical: true    }); }); </script> は参考になりました。 最初、 <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ vertical:true, scroll:1 }); }); </script> でやっていたのですが、 <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ vertical:true, scroll:1, visible:6, }); }); </script> に直すことで自宅のIE、Firefoxで想像通りに仕上げることができました。 visible:6,は<li>●●</li>を最初に6つ表示するという意味なのでしょうね…。 素人程度の知識しかないので、色々いじってみた結果でなんとなくわかったのですが^^; …しかし、職場のIE(たぶん1つ前のバージョン)では、こう記述していると、 6つ表示させるはずが、領域の中に全て押し込められて表示されてしまいました。。 そこで、元にもどすと職場のIEでうまく表示できたのですが、今度はFirefoxがダメ… ブラウザやバージョンによってこんなに左右されるものでしょうか?

関連するQ&A

  • JavaScript・cssを使って、画像を自動スクロールさせたいので

    JavaScript・cssを使って、画像を自動スクロールさせたいのですが、http://spaceforaname.com/filmstrip.htmlのように表示させる方法を詳しく、分かりやすく教えて頂きたいです。よろしくお願いいたします。

  • 画面いっぱいの背景画像を縦にエンドレスにスクロールできますでしょうか?

    画面いっぱいの背景画像を縦にエンドレスにスクロールできますでしょうか? 上から下、もしくは下から上にシームレスに。つなぎ目が分からないような感じです。 いろいろと探してみたのですが、なかなかなくて。 画像のサイズはモニターサイズに自動リサイズもできればいいですね。 jqueryになるのでしょうか。 よろしくお願い申し上げます。

  • JavaScriptでスクロール画像

    JAvaScriptで、ブラウズのスクロール時に画像が常に固定の位置で表示される(付いて来る)ようなことをしたいのですが、何か良いサンプルはございますか?

  • 画像/文字をスクロールさせるスクリプト

    表題の通り、JavaScriptで、文字や画像をスクロールさせる外部ライブラリを探しています。 今のところ、左へ向けてスクロールしていくものしか発見できませんでした。 現状、/jquery-1.3.2.min.js と、sc_text/jcarousellite_1.0.1.js を使って、次のようなスクロールまでは出来ています。 http://www.royal-e.com/javascript/test5.htm 【ソース】※相対リンクなので、そのままコピーしても動きません。悪しからずご了承ください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE>無題ドキュメント</TITLE> <SCRIPT type="text/javascript" src="sc_text/jquery-1.3.2.min.js"></SCRIPT> <SCRIPT type="text/javascript" src="sc_text/jcarousellite_1.0.1.js"></SCRIPT> <SCRIPT language="JavaScript"> <!-- $(function() { $(".carousel").jCarouselLite({ auto: 800, speed: 2000, visible: 5, btnNext: ".next", btnPrev: ".prev", }); }); //--> </SCRIPT> </HEAD> <BODY> <DIV class="carousel"> <UL> <LI><IMG src="images/best_1.jpg"></LI> <LI><IMG src="images/best_2.jpg"></LI> <LI><IMG src="images/best_3.jpg"></LI> <LI><IMG src="images/best_4.jpg"></LI> <LI><IMG src="images/best_5.jpg"></LI> <LI><IMG src="images/best_6.jpg"></LI> <LI><IMG src="images/best_7.jpg"></LI> <LI><IMG src="images/best_8.jpg"></LI> <LI><IMG src="images/best_9.jpg"></LI> <LI><IMG src="images/best_10.jpg"></LI> </UL> </DIV> <A href="#" class="prev">戻る</A> <A href="#" class="next">次</A> </BODY> </HTML> 希望としては 1.左 右 などのボタンで、スクロールの方向を、簡単に切り替えられる。(もちろん、現在表示の位置から方向が変わる) ⇒例えば、上のサンプルで、5を見逃したら、ボタンを押す(あるいはマウスオン)で回転方向が逆になって、5が左から出てくる という感じです。 2.早送り、巻き戻し など、スクロールの速度も変更できる。  3や4が表示されているとき、ボタンやマウスオンで、動きが早くなって、9や10まで素早く移動できるという感じです。 そのような外部ライブラリをご存知でしたら、教えていただけないでしょうか? jcarousellite の改造方法でもけっこうです。 スクロールする画像や文字を頻繁に入れ替えたいので、その部分についてはjcarousellite のように簡単に指定できると、たいへん助かります。

  • JavaScriptで縦固定と横スクロールしたい

    CSSでは不可能とわかったのですが縦は位置を固定で横だけスクロールで見れるようにしたいのですが、その方法はどうすればいいでしょうか。 position-y:fixed; position-x:absolute; と書いていますがCSSでは目次が消えてしまいます。 そこでJavaScriptなら可能と聞きました。 目次を縦のときは固定でスクロールしても動かないようにしたいのですが、解像度が低いモニターのために横だけはスクロールしたときに横だけ全部見えるようにしたいです。 よろしくお願いいたします。

  • jQueryを使い、数枚の画像が延々とスクロールするページを作っていま

    jQueryを使い、数枚の画像が延々とスクロールするページを作っています。 ページはできたのですが、一つおかしな動きをします。 8枚の画像が一周するあたりで、なぜかスクロールが一瞬早くなるのです。 どこの書き方が問題なのでしょうか。 よろしくお願いします。 なお、画像は下記のサイト様から拝借しました。 この場を借りてお礼申し上げます。 http://sozai-free.com/sozai-list/scenery.html

  • JavaScript スクロール制御

    javascriptの動作についてご教授下さい。 ウィンドウ画面が横1275px 縦925pxで パージ内容が横長の横2350px 縦925pxの ページ全体を横軸スクロールで表示可能なサイトで、 <img>タグで画像を非表示(配置はセンター付近)し、 ある画像リンクへの文字列をクリックでjavascriptから その<img>を非表示から表示に切り替えています。 (ページイメージ)                        |リンク文字位置|               |img位置| 横2350px----------------------------------------------------→ で、今回の質問なのですが、リンク文字はページ右辺に配置しており javascriptからimgを可視化するとスクロールが初期位置(横0)に戻ってしまいます。 スクロール位置はそのままで画像の可視化・非可視化を切り替えたいのですが、ムリなのでしょうか?? いちよう可視化後に scroll()でスクロールの位置を指定していても スクロールが初期位置(横0)に戻ってしまいます。↓↓↓ この現象はJavaScriptの仕様なのでしょうか?? 横長のページであることと、リンク文字の配置は仕様として 変更できないものとお願いいたします。 環境 WinXP SP3 IE8(8.06) 画像切り替えソース //引数urlの画像をimgで表示する関数 function visi(url) {  //imgのプロパティを取得  var jpg = document.getElementById('jpg_link');  jpg.style.visibility = "visible"; jpg.style.display = "block"; jpg.src = url;  //scroll(1500,0); ← 1500まで行くが初期位置に戻る・・・ }

  • スクロールしても背景画像が止まって表示されるJavaScript

    ホームページでスクロールしても背景画像が止まって表示されるJavaScriptを教えてください。 前まで知っていたんですけど、検索しても見つかりません。よろしくお願いします。

  • ページ横スクロールでjQuery lightBox

    横に長いwebページを作っています。 ページの途中でjQuery lightBox plugin (http://leandrovieira.com/projects/jquery/lightbox/) を使って拡大画像を表示させたいのですが、 サムネイルをクリックすると、ページのはじめの方に拡大画像が表示されてしまいます。(拡大時の背景のオーバーレイもずれている) これを、サムネイルのあるページ上に表示させるようにしたいのですが、javascriptがよくわからないので、どのように修正したらよいか教えていただけないでしょうか。

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

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