- 締切済み
JavaScriptを使って縦に画像がスクロールするページを作りたいの
JavaScriptを使って縦に画像がスクロールするページを作りたいのですが、 (こんなかんじで動く)http://www.gmarwaha.com/jquery/jcarousellite/index.php 私はまだ勉強中で、テンプレートをダウンロードして少々いじって使う程度しかできません。 テンプレートで縦に動くものをみつけたのですが http://sorgalla.com/jcarousel/ 画像や全体の幅を広げようとまずCSSで調整したら、画像は大きくなったけど、 全部縦に画像がうまく並ばず、何枚も画像が表示されるはずなのに、1枚しか表示されなくなりました。 矢印ボタンを押してスクロールさせようとすると、 表示枠は長くしてあるのに、一番上の画像が別の画像に切り替わるという感じです。 言葉だけではうまく伝わらないとは思いますが。。 一番上に記載したURLのやつを縦バージョンにする方法など、 あったら教えていただけないでしょうか? 他にも、縦にスクロールするJavascriptをご存知の方いらっしゃいましたら、教えていただけると助かります。 他力本願で大変お恥ずかしいのですが、どなたかうまく作れる方法がありましたらご協力お願いします!!
- みんなの回答 (1)
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
「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>
補足
回答ありがとうございます。 お返事が遅くなってすみませんでした。 画像のように変になっていたのはスタイルシートでの設定の問題という 初歩的なミスでした。 ですが、 <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がダメ… ブラウザやバージョンによってこんなに左右されるものでしょうか?