幅、高さ、スライド枚数は調整可能。横スライドにも調整できます。
ヘッダーで、jquery.jsと後述のheightSlide.jsを読み込んでいます。
自動スライド中。ボタンコントロールを非表示にしています。次へ前の表示もできます。
反対の単純に縦（上から）にスライドするスライドショーのデモページ
もあわせてどーぞ。
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;
}