簡単スライドショー（短） 【jQuery】

難しいものは特になく、簡単にスライドショーをつくれます。
リスト（li）そのものを移動するので、ALTやリンク先を変更というのがなくなります。
（※順番は下からになります。）


～動かし方のイメージ～

重なってる上から順にフェードアウトして、

フェードアウトしたら、重なりの一番下に移動して、それを繰り返す。

※繰り返すのは、FLASHと同じ（タイムライン）ように、考える
JavaScriptのタイマーを使用（setInterval（））

window.setInterval(ani_box_slide,2000);

２秒たったら、関数「ani_box_slide」やってね。の意


①同じ大きさの画像を用意する



②リストに画像いれる、リンク付き

<div id="ani_box">
<ul>
<li><a href="#1"><img src="img_01.png" alt="01" width="200" height="150" /></a></li>
<li><a href="#2"><img src="img_02.png" alt="02" width="200" height="150" /></a></li>
<li><a href="#3"><img src="img_03.png" alt="03" width="200" height="150" /></a></li>
</ul>
</div>

※すべて同じリンク先の場合は、html5ならブロック要素囲みがOKです。



③CSSでリストを重ねる。

#ani_box{
height:200px;//一応高さを指定
}

#ani_box ul{
list-style:none;
position:relative;
}

#ani_box ul li{
position:absolute;
top:0;
left:0;
}

③jsでリストを重ねる。

$(function(){

function ani_box_slide(){
$("#ani_box li:last").fadeOut("fast",function(){$(this).fadeIn("fast").insertBefore("#ani_box li:first")});
}
window.setInterval(ani_box_slide,2000);

});

ポジションで重ねて、一番上の（リストでいう一番最後）をフェードアウトして、
し終わったら、フェードインして一番下（リストでいう一番初め）にもっていってね。の意。


※CSSをいったん切ると、↑のことがよくわかる。