jQuery ---- ローテーションバナーを作ってみる。

18755 ワード
jQuery jQuery テキストリンク

画像が一定期間で、ローテーションする「ローテーションバナー」を作ってみる。

①完成図 このバナーが一定期間で「バナー1」から「バナー4」へと変わっていく（そしてそれを繰り返す）。

なお完成サンプルは↓
http://m-uehara.com/rotation001/

ファイルダウンロードは
rotation001.zipです。

ファイル構成

  • index.html
  • slide.js
  • style.css

の３つです。

コード

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Contents-Script-Type" content="text/javascript" />
<title>ローテーションバナー</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="slide.js"></script>
</head>

<body>

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
    $('ul#rotation').slide();
});
</script>

<ul id="rotation">
<li><a href="#"><img src="pict01.jpg" width="468" height="60" alt="リンク先サイト名" /></a></li>
<li><a href="#"><img src="pict02.jpg" width="468" height="60" alt="リンク先サイト名" /></a></li>
<li><a href="#"><img src="pict03.jpg" width="468" height="60" alt="リンク先サイト名" /></a></li>
<li><a href="#"><img src="pict04.jpg" width="468" height="60" alt="リンク先サイト名" /></a></li>
</ul>

</body>
　
</html>
slide.js

(function($) {
    $.fn.slide = function(settings) {
        settings = jQuery.extend({
            firstload       : 0,
            showmode        : "normal", // [ random | normal ]
            action          : "auto",   // [ auto | click ]
            interval_mode   : "randum", // [ random | normal ]
            interval_normal : 2000,
            interval_min    : 2000,
            interval_max    : 5000,
            animation       : true,     // [ true | false ]
            fadespeed       : 1000
        }, settings);

        var _root   = this;
        var max     = $(this).find("li").length;
        var current = settings.firstload;

        $(this).find("li").not(":eq(" + current + ")").hide();

        if(settings.action == "auto") {
            intervalmode_check();
        } else if(settings.action == "click") {
            $(this).click(animation);
        }

        function intervalmode_check() {
            if(settings.interval_mode == "normal") {
                setTimeout(animation, settings.interval_normal);
            } else {
                var time = settings.interval_min + Math.floor(Math.random() * (settings.interval_max + 1));
                setTimeout(animation, time);
            }
        }

        function animation() {
            var prev = $(_root).find("li").eq(current);
            var n = current;
            if(settings.showmode == "normal") {
                if(current == (max- 1)) {
                    current = 0;
                } else {
                    current++;
                }
            } else {
                current = Math.floor(Math.random() * max);
            }
            var next = $(_root).find("li").eq(current);
            if(n == current) {
                animation();
            } else {
                if(settings.animation == true) {
                    prev.fadeOut(settings.fadespeed);
                    next.fadeIn(settings.fadespeed);
                } else {
                    prev.hide();
                    next.show();
                }
                intervalmode_check();
            }
        }
    }
})(jQuery);
style.css

body{
    margin:0px;
    padding:0px;
}

ul#rotation {
    margin:0;
    padding:0;
    position:relative;
    list-style:none;
}

ul#rotation li {
    margin:0;
    padding:0;
    position:absolute;
    top:0;
    left:0;
    display: block;
    margin: 0 auto;
}

a img {
    border-style:none;
}
JSカレンダー選択プラグイン3