ループするサムネイル

今回はサムネイル表示についてループ処理させてみました。
意外と使うことがありそうです。
plugin を使用する必要も無い場合などに使えるかと思います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                var loopWidth = 220;

                $('#loop_area div').clone().appendTo('#loop_area');

                $('#div_prev').click(function() {
                    $('#loop_area').stop().animate({left:'-' + loopWidth + 'px'}, 'slow', 'linear', function() {
                        $('#loop_area div:first-child').appendTo('#loop_area');
                        $('#loop_area').css({left:0});
                    });
                });

                $('#div_next').click(function() {
                    $('#loop_area div:last-child').prependTo('#loop_area');
                    $('#loop_area').css({left:'-' + loopWidth + 'px'});
                    $('#loop_area').stop().animate({left:'' + 0 + 'px'}, 'slow', 'linear', function() {
                    });
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #main_area div {
                float            : left;
            }

            #thumb_area {
                top              : 0px;
                left             : 0px;
                width            : 660px;
                height           : 80px;
                overflow         : hidden;
                position         : relative;
            }

            #loop_area {
                width            : 2200px;
                position         : absolute;
            }

            #loop_area div {
                float            : left;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="div_prev" class="thumb_move">
                <span>&lt;&lt;</span>&nbsp;
            </div>
            <div id="thumb_area">
                <div id="loop_area">
                    <div class="thumb_div"><img src="./icon_jpeg01.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg02.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg03.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg04.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg05.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg07.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg08.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg09.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg10.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg11.jpg"></div>
                </div>
            </div>
            <div id="div_next" class="thumb_move">
                &nbsp;<span>&gt;&gt;</span>
            </div>
        </div>

    </body>
</html>

sample

sample ではサムネイルが何枚か並んでいます。
左右の矢印を click するとサムネイルが動きます。
サムネイルは 10 枚ですが押し続けることで永遠に ループします。

今回は簡単な画像を使用したサムネイルをループさせて見ました。
実際には複数毎に移動させることなども可能ですね。
枚数が増えた時には複数枚単位での移動を試みていても面白いと思います。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です