自動で表示切り替えをしたい！！
下記のリストを、数秒ごとに一つずつ順に表示させるにはどうすればよいでしょうか？
クリックすればそこに移動し、ほっとくとまた動き出すものが良いのですが。
（本当は、オンマウスだけで表示が替わるようにしたいです！！）
アドバイスお願いします＞＜
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function(){
//Set Variables
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
//Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});
});//Close Function
</script>
</head>
<body>
<div id="main" class="container">
<div class="main_image">
<img src="banner1.jpg" alt="- banner1">
<div class="desc">
<div class="block">
<h2>Slowing Down</h2>
<small>04/10/09</small>
<p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p>
</div><!-- block -->
</div><!-- desc -->
</div><!-- main_image -->
<div class="image_thumb">
<ul>
<li>
<a href="banner1.jpg"><img src="banner1_thumb.jpg" alt="Slowing Dow" width="50" height="38"></a>
<div class="block">
<h2>Slowing Down</h2>
<small>04/10/09</small>
<p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p>
</div><!-- block -->
</li>
<li>
<a href="banner2.jpg"><img src="banner2_thumb.jpg" alt="Organized Food Fight" width="50" height="38"></a>
<div class="block">
<h2>タイトル2</h2>
<small>04/11/09</small>
<p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p>
</div><!-- block -->
</li>
<li>
<a href="banner3.jpg"><img src="banner3_thumb.jpg" alt="Endangered Species" width="50" height="38"></a>
<div class="block">
<h2>タイトル3</h2>
<small>04/12/09</small>
<p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p>
</div><!-- block -->
</li>
<li>
<a href="banner4.jpg"><img src="banner4_thumb.jpg" alt="Evolution" width="50" height="38"></a>
<div class="block">
<h2>タイトル4</h2>
<small>04/13/09</small>
<p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p>
</div><!-- block -->
</li>
<li>
<a href="banner5.jpg"><img src="banner5_thumb.jpg" alt="Puzzled Putter" width="50" height="38"></a>
<div class="block">
<h2>タイトル5</h2>
<small>04/14/09</small>
<p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p>
</div><!-- block -->
</li>
<li>
<a href="banner6.jpg"><img src="banner6_thumb.jpg" alt="Secret Habit" width="50" height="38"></a>
<div class="block">
<h2>タイトル6</h2>
<small>04/15/09</small>
<p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p>
</div><!-- block -->
</li>
</ul>
</div><!-- image_thumb -->
</div><!-- container -->
</body>
