No.1ベストアンサー
- 回答日時:
複数の画像を横にスクロールさせる方法は様々なパターンがありますが、
ご提示のサイトでは、スクロールさせたい<DIV>にidを付けて、その<div>内に
(一部略)
<div id="tSContScroll">
<table><tbody><tr><td>画像</td><td>画像</td><td>画像</td>...</tr></tbody></table>
</div>
のように<table>を配置し、<td>にサブネール画像<img>とリンク<a>を配置してますね。
ボタンは、画像で付くって、onclickイベントで、スクロールする対象と、スクロール量
を関数に渡すようにして、CSSで<div>の左右に回り込ませているようです。
(一部略)
<ul>
<li class="left">
<a onclick="pictureScrollLeft('tSContScroll', 169);return false;" ....>
<img src="slider_arr_l.gif" ....></a>
</li>
<li class="right">
<a onclick="pictureScrollRight('tSContScroll', 169);return false;" ....>
<img src="slider_arr_r.gif" ....></a>
</li>
</ul>
javascriptのスクロールさせる関数部分は、
<script tye="text/javascript">
function pictureScrollLeft(idname, size) {
var nowX = document.getElementById(idname).scrollLeft;
if (nowX <= size) {
document.getElementById(idname).scrollLeft = 0;
} else {
document.getElementById(idname).scrollLeft = nowX - size;
}
}
function pictureScrollRight(idname, size) {
var nowX = document.getElementById(idname).scrollLeft;
if (nowX > document.getElementById(idname).width - (size * 2)) {
document.getElementById(idname).scrollLeft = document.getElementById(idname).width - size;
} else {
document.getElementById(idname).scrollLeft = nowX + size;
}
}
</script>
となってますね。
後は、CSSで見栄えを調整しているといったところです。
他にも画像スクロールのjavascriptライブラリーは、たくさんあります。
例えば、jQueryベースですが、
「jCarousel Lite」
http://gmarwaha.com/jquery/jcarousellite/index.p …
「jCarousel」
http://sorgalla.com/jcarousel/
等など...
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- iPhone(アイフォーン) 同じ写真と動画をiOSが検出する便利な機能 写真のアルバムタブにて、画面を一番下までスクロールすると 3 2023/01/23 15:41
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- YouTube 数年前に見たある洋楽の動画を2つ探しています。 まず一つは、車や人が飛び交う街中の歩道にピクミンくら 3 2022/06/26 03:25
- InternetExplorer(IE) Edge でマウスの真ん中のボタン(ミドルボタン)を押すと、スクロールするのを無効にしたい 2 2023/06/11 05:05
- ホームページ作成・プログラミング サイトの同じページに画像を複数挿入し、それぞれの画像に別リンクを貼ることはできますか? 初心者なので 1 2022/08/04 11:46
- その他(パソコン・周辺機器) ボタン数の多いゲームコントローラー、ゲームパッドを探しています 2 2023/08/17 16:29
- 数学 画素数の計算 中高レベルの計算で申し訳ないのですが、下記の問題が分かりません 比率が4:3のA4の横 3 2022/12/17 22:41
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
エクセルVBAでフォームのListbo...
-
Excelでワードアートや図を常に...
-
リストビューをスクロールさせ...
-
Visual Basicから Spreadのスク...
-
html js 横軸の長いチャート
-
PDFを(htmlのように)無限に縦...
-
たまに縦長のWebページを一枚の...
-
リストビューの表示開始行変更
-
子要素のスクロールが親要素に...
-
スクロールバーの位置指定
-
水平スクロールができない。
-
画像とグラフの重ね合わせ
-
Excelで一部分だけを常に表示さ...
-
ページ訪問時にiframe内を自動...
-
Excelの質問で票の途中に...
-
C# Panel領域の下部に余白を設...
-
マウスでコロコロしたいんですが…
-
スクロール位置を中央にしたい
-
ワードでHP作成中ですが流れ...
-
リストビューのスクロールバー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Excelでワードアートや図を常に...
-
エクセルVBAでフォームのListbo...
-
PDFを(htmlのように)無限に縦...
-
リストビューをスクロールさせ...
-
Excelで1.2行目だけ固定して...
-
Excelで一部分だけを常に表示さ...
-
大きい表へのスクロールバーの...
-
Visual Basicから Spreadのスク...
-
vb,netでtextboxの文字を右から...
-
ページ訪問時にiframe内を自動...
-
アコーディオンで開かれたパネ...
-
マウスオーバー→ホイール回転で...
-
webページで横方向にアンカーを...
-
リストビューの水平スクロール...
-
ExcelVBAで他のアプリをスクロ...
-
IFRAMEでscrolling="yes|no"の...
-
リストビューのスクロールバー...
-
ページ読み込み時に自動でスク...
-
子要素のスクロールが親要素に...
-
Webサイト内でスクロールする小...
おすすめ情報