jqueryでクロスフェードするスライドショー

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/fade.js" charset="utf-8"></script>

[fade.js]JavaScript

$(function(){
	$("#slidelist").html($("#slidelist li").get().reverse());
	
	$("#slidelist li").hover(function(){
		$(this).stop(true, true);
	},function(){
		crossFade();
	})
	
	function crossFade(){
			$("#slidelist li:last").delay(4000).fadeOut("slow",function(){
					$(this).prependTo("#slidelist").show()
					crossFade();
			})
	}
	crossFade();
})

HTMl

<div class="mod_billboard">
<ul id="slidelist">
<li><a href="#"><img src="img/cut01.jpg" alt="写真" width="500" height="300" /></a></li>
<li><a href="#"><img src="img/cut02.jpg" alt="写真" width="500" height="300" /></a></li>
<li><a href="#"><img src="img/cut03.jpg" alt="写真" width="500" height="300" /></a></li>
</ul>
<!--mod_billboard_end--></div>

CSS

.mod_billboard {
	 width:500px;
	 height:300px;
}
.mod_billboard li{
  position: absolute;
}