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

A 回答 (1件)
- 最新から表示
- 回答順に表示
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>
この回答への補足
回答ありがとうございます。
お返事が遅くなってすみませんでした。
画像のように変になっていたのはスタイルシートでの設定の問題という
初歩的なミスでした。
ですが、
<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が見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- その他(動画サービス) VLCメディアプレーヤーについて 1 2022/11/29 14:19
- WordPress(ワードプレス) ワードプレスで、左寄せ画像と文字を横並びにせず、画像の下に文字を表示される方法を教えてください 1 2022/04/24 11:06
- その他(ブラウザ) bingチャットの内容(縦長)をスクリーンショットで保存する方法 3 2023/02/28 02:13
- Windows 8 Windowsで縦に長いページを全てスクリーンショットしそれをPDFにしたいのですが、印刷画面でPD 5 2022/12/14 11:33
- Visual Basic(VBA) ChatGPTに作らせたい Excel VBA 1 2023/04/05 19:56
- Android(アンドロイド) 縦スクロールできる画像保存アプリを探しています 1 2022/12/30 20:55
- その他(教育・科学・学問) 技術のテストの問題です。やり方を教えてください! 間1.7バイトは何ビットか。 間2.5ビットで表現 4 2023/02/27 00:09
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<table>、もしくは<iframe>内で...
-
重複しないランダムリンクの表...
-
画像ランダム表示、しかしダブ...
-
複数の画像を先に読み込ませ表...
-
クリックすると画像を表示するタグ
-
画像をクリックしてその地点の...
-
強制的に読み込み完了とする方...
-
WEBページ立ち上げ時に1回のみ...
-
透過pngの透明部分以外をクリッ...
-
Javascript初心者|jQueryの.va...
-
サニタイズcssが反映されません...
-
java折りたたみタグを複数設置...
-
同一ページ内で、任意の文字列...
-
jQueryについて質問なのですが...
-
onclickで画面が固まる・・・ら...
-
jqueryのプラグインslickの画像...
-
下記のスクリプトを高速にする...
-
ダイアログから画像ファイルは...
-
こんにちは、javascriptにてボ...
-
jqueryで要素の中身を要素の外...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
画像の重なりの順序を代える方...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
透過pngの透明部分以外をクリッ...
-
1枚の画像をクリックして複数の...
-
ステータスバーについて
-
JavaScript スライドの画像にリ...
-
マウス追従スクリプトについて
-
画面の表示位置を指定させて表...
-
Javascriptで指定した日付と時...
-
プルダウンの位置がwin/macでず...
-
jQueryで特定のURLの時のみ表示
-
オンマウスで、画像切り替え+...
-
バナー広告のように表示させた...
-
ランダム表示に加えwidthをブラ...
-
JavaScriptとチェックボックス...
-
ホォルダの読む込み
-
jQuery bxSlider 画像に変更
-
画像にロールオーバーするとメ...
おすすめ情報