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>
