ファイル構成

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;
}