縦に自動でスライドするスライドショー

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script src="js/heightSlide.js"></script>

[heightSlide.js]JavaScript

$(function(){
	//初期設定
	$("#billboard ul").css("height",240*$("#billboard ul li").size()+"px");
	$("#billboard ul li:last").prependTo("#billboard ul");
	$("#billboard ul").css("margin-top","-240px");
	//ボタン前へ
	$("#prev").click(function(){
		$("#billboard ul").animate({
			marginTop : parseInt($("#billboard ul").css("margin-top"))+240+"px"},"","swing" , 
		function(){
			$("#billboard ul").css("margin-top","-240px")
			$("#billboard ul li:last").prependTo("#billboard ul");
			$("#next,#prev").show();
		});
	});
	//ボタン次へ
	$("#next").click(function(){
		$("#billboard ul").animate({
			marginTop : parseInt($("#billboard ul").css("margin-top"))-240+"px"},"","swing" , 
		function(){
			$("#billboard ul").css("margin-top","-240px");
			$("#billboard ul li:first").appendTo("#billboard ul");
			$("#next,#prev").show();
		});
	});
	//timer
	var timerID = setInterval(function(){
		$("#next").click();
	},5000);
	//reset
	$("#prev img,#next img").click(function(){
		clearInterval(timerID);
	});
	
});

HTMl

<div id="billboard" class="mod_billboard">
<ul>
<li><a href="#"><img src="img/00.jpg" width="520" height="240"></a></li>
<li><a href="#"><img src="img/01.jpg" width="520" height="240"></a></li>
<li><a href="#"><img src="img/02.jpg" width="520" height="240"></a></li>
<li>テキストも入ります。</li>
</ul>
<!--main-visual-outer_end--></div>
<div class="mod_billboardcontent_btn">
<ul>
<li id="next"><img src="img/prev.png" alt="次へ" /></li>
<li id="prev"><img src="img/next.png" alt="前へ" /></li>
</ul>
<!--mod_billboardcontent_btn_end--></div>

CSS

#billboard {
    height: 240px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 520px;
    border:double 3px #CCCCCC;
}
#billboard ul li {
    display: block;
    height: 240px;
    width: 900px;
}
/* btn */
.mod_billboardcontent_btn {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}