HTML结构：
<div id="sc">
<div class="dot">
<span>•</span>
<span>•</span>
<span>•</span>
<span>•</span>
<span>•</span>
</div>
<ul>
<li><img src="1.jpg" width="570" height="360" /></li>
<li><img src="2.jpg" width="570" height="360" /></li>
<li><img src="3.jpg" width="570" height="360" /></li>
<li><img src="4.jpg" width="570" height="360" /></li>
<li><img src="5.jpg" width="570" height="360" /></li>
</ul>
</div>
CSS样式：
<style>
*{padding:0;margin:0;}
ul,li{list-style:none;}
#sc{width:570px;height:360px;overflow:hidden;position:relative;margin:100px;}
#sc .dot{position:absolute;right:10px;bottom:20px; z-index:100;}
#sc .dot span{display:inline-block;font:35px/25px Verdana, Geneva, sans-serif;color:#9cf;}
#sc ul{width:3500px;position:absolute;left:0;top:0; z-index:1;}
#sc ul li{float:left;width:570px;height:360px;}
#sc .dot .btn{color:#fff;}
</style>
JS程序：
<script>
$(function(){
var x=$("#sc ul li").length;
var wid=$("#sc ul li").width();
var index=0;
$("#sc .dot span:first").addClass("btn")
$("#sc .dot span").hover(function(){
index=$(this).index();
$("#sc .dot span").removeClass("btn")
$("#sc .dot span").eq(index).addClass("btn")
sc(index)
},function(){
})
$("#sc").hover(function(){
clearInterval(aTimer)
},function(){
aTimer=setInterval(function(){
sc(index);
$("#sc .dot span").removeClass("btn")
$("#sc .dot span").eq(index).addClass("btn")
index++;
if(index == x) {index = 0;}
},3000)
}).trigger("mouseleave")
function sc(index){
wy=-index*wid
$("#sc ul").stop().animate({"left":wy},500)
}
})
</script>
