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ランキング
-
javascriptで毎月替わる画像
-
HTMLで条件分岐はできますか?
-
textareaに画像を表示したい
-
Javascriptで指定した日付と時...
-
画面の表示位置を指定させて表...
-
透過pngの透明部分以外をクリッ...
-
(超初心者向け)マウスオーバ...
-
FancyZoom (javascriptで画像拡...
-
サムネイルをクリックすると画...
-
Gifアニメ、最後のコマに行った...
-
画像をフォルダに入れれば表示...
-
jQueryスライドショー画像への...
-
各フォルダから1枚ずつ画像をラ...
-
MAX関数を使ってからLEFT JOIN...
-
HTMLですCSSです 画像のように...
-
アップロードファイルの種類に...
-
Slick.jsのオプションrtlについて
-
スタイルシートで画面を上下に...
-
大分類・中分類・小分類
-
javascriptテキストBOX色を元に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Javascript で共通の処理をどこ...
-
Javascriptで指定した日付と時...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
1枚の画像をクリックして複数の...
-
画像ランダム表示、しかしダブ...
-
スライダーを実装した場合、ペ...
-
1枚の画像をクリックすると複数...
-
HTMLで条件分岐はできますか?
-
JavaScript スライドの画像にリ...
-
オンマウスで、画像切り替え+...
-
画像の重なりの順序を代える方...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
画像をドラッグ&ドロップで移...
-
各フォルダから1枚ずつ画像をラ...
-
jQueryで特定のURLの時のみ表示
-
bxsliderにて読み込み後に内容...
-
prettyphotoの画像表示について
-
WEBページ立ち上げ時に1回のみ...
おすすめ情報