忍者ブログ
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。



2017/08/24 04:33 |
JavaScript2-9:うにょーんと左右に動く画像ビューア

よくある左右に動くサムネイルです。


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


2009/03/19 17:55 | Comments(0) | TrackBack(0) | JavaScript

トラックバック

トラックバックURL:

コメント

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<PHP1-62:PHPでキューとスタック | HOME | PHP1-61:PHPでセッション書き換えその2>>
忍者ブログ[PR]