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


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

①完成図 このバナーが一定期間で「バナー1」から「バナー4」へと変わっていく（そしてそれを繰り返す）。
![banner001.png](https://qiita-image-store.s3.amazonaws.com/0/35975/1655faf7-14da-b439-1125-6e783d3d3423.png "banner001.png")

なお完成サンプルは↓
[http://m-uehara.com/rotation001/](http://m-uehara.com/rotation001/ "rotation001")

ファイルダウンロードは
[rotation001.zip](http://m-uehara.com/rotation001.zip "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;
}

```