一定時間で画像を切り替える

先日定期的に画像を切り替えたいとの依頼を頂きました。
画像を切り替えた際には画像をズームするというおまけ付きです。
とりあえず忘備録を兼ねて記載しておきます。

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

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                var objArea;
                    objArea = $('ul#image_area li');

                // Data Set
                minCnt    = 1;
                maxCnt    = objArea.length;
                setTimer  = 1500;  // ms
                minSizeX  = 80;
                minSizeY  = 220;
                sizeRate  = 1.5;
                maxSizeX  = (minSizeX * sizeRate);
                maxSizeY  = (minSizeY * sizeRate);

                objArea.hide();
                function moveImage( cnt ) {

                    // Init
                    objTarget = $('ul#image_area li:nth-child(' + cnt + ')');
                    objArea.fadeOut( setTimer );

                    // Image Move
                    objTarget.find('img')
                             .css({ 'width':  minSizeY + 'px', 'height': minSizeX + 'px' })
                             .animate({ 'width': maxSizeY + 'px', 'height': maxSizeX + 'px' }, setTimer);
                    objTarget.fadeIn( setTimer )

                    // Next Image
                    if ( cnt >= maxCnt ) {
                        cnt = minCnt;
                    } else {
                        cnt = cnt + 1;
                    }
                    $(window).delay( setTimer ).queue( function () {
                        moveImage( cnt );
                        $(this).dequeue();
                    });

                }

                // Move Start
                moveImage( minCnt );

            });

        --></script>

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

            div {
                margin     : 10px;
            }

            #image_area li {
                position   : absolute;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <ul id="image_area">
                <li><img src="./icon_jpeg01.jpg"></li>
                <li><img src="./icon_jpeg02.jpg"></li>
                <li><img src="./icon_jpeg03.jpg"></li>
                <li><img src="./icon_jpeg04.jpg"></li>
                <li><img src="./icon_jpeg05.jpg"></li>
                <li><img src="./icon_jpeg06.jpg"></li>
                <li><img src="./icon_jpeg07.jpg"></li>
                <li><img src="./icon_jpeg08.jpg"></li>
                <li><img src="./icon_jpeg09.jpg"></li>
                <li><img src="./icon_jpeg10.jpg"></li>
            </ul>

        </div>
    </body>
</html>

sample

sample を開くと一定期間ごとに画像が切り替わります。
切り替わった際には画像が少し拡大していく感じです。

とりあえず簡易的に目を引く様な項目は出来たのではないかと思います。
実際には css で画像の中心を固定するとかの対応は必要ですが、
バナー程度のサイズならこのまま使用しても良いんじゃないでしょうか。

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

コメントを残す

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