アニメーションをループさせたい
すみませんjquery初心者です。
下記の様な簡単なスライドショーを作りたいのですが、
----------------------------------------------------------------
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script>
setTimeout(function() {
$(".slide01").hide();
$(".slide02").show();
}, 3000);
setTimeout(function() {
$(".slide02").hide();
$(".slide03").show();
}, 6000);
setTimeout(function() {
$(".slide03").fadeOut(2000);
$(".slide04").fadeIn(2000);
}, 9000);
setTimeout(function() {
$(".slide04").fadeOut(2000);
$(".slide01").fadeIn(2000);
}, 15000);
</script>
<style>
p.slide01,
p.slide02,
p.slide03,
p.slide04 {
position: absolute;
}
</style>
<div class="slide">
<p class="slide01"><img src="images/image01.jpg" alt="" /></p>
<p class="slide02" style="display:none;"><img src="images/image02.jpg" alt="" /></p>
<p class="slide03" style="display:none;"><img src="images/image03.jpg" alt="" /></p>
<p class="slide04" style="display:none;"><img src="images/image04.jpg" alt="" /></p>
</div>
----------------------------------------------------------------
下記の様にループさせようとすると何やら挙動がおかしくなってしまいます。。
----------------------------------------------------------------
setInterval( function () {
setTimeout(function() {
$(".slide01").hide();
$(".slide02").show();
}, 3000);
setTimeout(function() {
$(".slide02").hide();
$(".slide03").show();
}, 6000);
setTimeout(function() {
$(".slide03").fadeOut(2000);
$(".slide04").fadeIn(2000);
}, 9000);
setTimeout(function() {
$(".slide04").fadeOut(2000);
$(".slide01").fadeIn(2000);
}, 15000);
},0);
----------------------------------------------------------------
どのようにすればループさせることが出来るのでしょうか？
ご教授頂けると非常に助かります。
よろしくお願いします。
