よくある左右に動くサムネイルです。
jQueryのプラグイン、jCarouselがそのまんまの機能を持っていますのでさくっと作ってみます。
jCarousel 0.2.3
http://sorgalla.com/projects/jcarousel/
libフォルダがライブラリ本体、skinsフォルダが見た目のCSS、imagesフォルダがロード中の画像です。
examplesフォルダには例が入っています。
使い方は簡単で、まず<ul><li>で画像の要素を並べ、<ul>のIDをオンロードでjcarouselに突っ込むだけです。
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"
src="jcarousel/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css"
href="jcarousel/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css"
href="jcarousel/skins/tango/skin.css" />
<script type="text/javascript">
//オンロードでjcarouselを実行
jQuery(document).ready(function() {
jQuery('#id_mycarousel').jcarousel({
scroll: 1
,initCallback:jcarousel_initCallback
});
});
//コールバック関数が必要なら書く
function jcarousel_initCallback(carousel, state){}
</script>
</head>
<body>
<ul id="id_mycarousel" class="jcarousel-skin-tango">
<li><img src="a.jpg" width="75" height="75" alt="" /></li>
<li><img src="b.jpg" width="75" height="75" alt="" /></li>
<li><img src="c.jpg" width="75" height="75" alt="" /></li>
<li><img src="d.jpg" width="75" height="75" alt="" /></li>
<li><img src="e.jpg" width="75" height="75" alt="" /></li>
<li><img src="f.jpg" width="75" height="75" alt="" /></li>
<li><img src="g.jpg" width="75" height="75" alt="" /></li>
<li><img src="h.jpg" width="75" height="75" alt="" /></li>
<li><img src="i.jpg" width="75" height="75" alt="" /></li>
<li><img src="j.jpg" width="75" height="75" alt="" /></li>
</ul>
</body></html>
|
まあ、同封されているサンプルそのまんまなのですが、このように簡単に表示が行えます。
引数で動作をある程度制御することができます。
scroll: 1で一枚づつスクロール、vertical:trueで縦表示、というふうに指定します。
それ以上複雑なことが行いたい場合は、色々な状態についてコールバック関数を指定することができます。
例として挙げているinitCallbackは、読み込まれた時に一回だけ実行してくれます。
見た目はCSSで変更します。
skins.cssを適当にいじくるだけです。
デフォルトではjcarousel-skin-tangoクラスとなっていますが、その中のサブクラスjcarousel-containerで全体のコンテナを設定、jcarousel-itemで個々のアイテムについての設定といったかんじになっています。
どうでもいいのですが、表示される要素には別に画像だけではなく文字を入れることもできるので、ちょっと使いにくいメニューなんてものも作成できます。
意味はありませんが。
PR
トラックバック
トラックバックURL:
