<div class="ad" >
<ul class="slider" >
<li><img src="images/ads/1.gif"/></li>
<li><img src="images/ads/2.gif"/></li>
<li><img src="images/ads/3.gif"/></li>
<li><img src="images/ads/4.gif"/></li>
<li><img src="images/ads/5.gif"/></li>
</ul>
<ul class="num" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>

//超鏈接文字提示
$(function(){
var len = $(".num >li").length;
var index = 0;
var adTimer;

$(".num li").mouseover(function(){
index = $(".num li").index(this); //這里的 " this " 可以換成 " $(this) "
showImg(index);
}).eq(0).mouseover(); //用來初如化，當(dāng)打開頁面時(shí)，做第一個(gè)圖片為屬標(biāo)放上時(shí)去觸發(fā)動(dòng)畫.


//以<ad 圖片>為對(duì)象, 屬標(biāo)滑入停止動(dòng)畫，屬標(biāo)滑出開始動(dòng)畫
$(".ad").hover(function(){
clearInterval(adTimer);
},function(){
adTimer = setInterval(function(){
showImg(index);
index++;
if( index == len ){ index=0; }
} , 3000);
}).trigger("mouseleave");
})

//通過給定的的索引 顯示不同的圖片

function showImg(index){
var adHeight = $(".content_right .ad").height();
$(".slider").stop(true,false).animate( {"top": -adHeight*index},1000 );
$(".num li").removeClass("on")
.eq(index).addClass("on");
}

.content_right{
background:#eee;
border : 1px solid #AAAAAA;
width: 586px;
float:left;
}


.content_right .ad {
margin-bottom:10px;
width:586px;
height:150px;
overflow:hidden;
position:relative;
}

.content_right .slider,
.content_right .num {
position:absolute;
}

.content_right .slider li{
list-style:none;
display:inline;
}

.content_right .slider img{
width:586px;
height:150px;
display:block;
}
.content_right .num{
right:5px;
bottom:5px;
}
.content_right .num li{
float: left;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
font-family: Arial;
font-size: 12px;
color: #FF7300;
background-color: #fff;
border: 1px solid #FF7300;
overflow: hidden;
margin: 3px 1px;
cursor: pointer;
}
.content_right .num li.on{
width: 21px;
height: 21px;
line-height: 21px;
color: #fff;
background-color: #FF7300;
font-size: 16px;
margin: 0 1px;
border: 0;
font-weight: bold;
}