jquery實現的一個導航滾動效果

　　現在先把代碼拷貝到這裡以後再逐一簡化修改
實現滾動效果腳本代碼如下

代碼如下:
var all=;
var no=;
var s_width=;
$(document)ready(function(){
all=$(slide)length;
s_width=$(slide)eq()width();
$("#slides")css(widthall*s_width);
var contiar=$(control_links);
for(var i=;i<all;i++){
contiarappend("<li></li>");
}
$(control_links li)bind(click mouseenterfunction(){
var index=$(this)index();
no=index;
var no_= no%all;
$("#slides")animate({left:(*no_*s_width)+px});
$(this)css(backgroundcolor#fff);
$(this)siblings()css(backgroundcolor#);
});
setInterval(function(){
var no_= no%all;
$("#slides")animate({left:(*no_*s_width)+px});
var curr= $(control_links li)eq(no_);
currcss(backgroundcolor#fff)
currsiblings()css(backgroundcolor#);
no++;
});
});

　　
css 代碼如下

代碼如下:
img{
border:none;
}
#daohangpic {
width:px;
margin: auto;
padding:px;
overflow:hidden;
}
#daohangpic img {
height:px;
width:px;
}

#contiar {
position:relative;
width:px;
height:px;
overflow:hidden;
margin: auto;
}
#slides {
position:absolute;
border:none;
}
slide {
float:left;
width:px;
height:px;
overflow:hidden;
border:none;
}
control_links{
position:absolute;
bottom:px;
right:px;
zindex:;
}
control_linkscontrol_links li {
liststyle: none;
}
control_links li {
float:left;
width: px;
height: px;
marginright: px;
textalign: center;
background:#;
border: px solid #;
cursor: pointer;
opacity:;
}
caption {
position:absolute;
height:px;
width:%;
backgroundcolor:#;
bottom:px;
paddingleft:px;
paddingtop:px;
overflow:hidden;
zindex:;
background:url(hdpngpng) norepeat scroll px;
}
caption h {
color: #FFF;
fontsize: px;
fontweight: bold;
lineheight:px;
}
caption p{
display: block;
color: #;
fontsize:px;
lineheight:px;
}

　　
要實現滾動的區域定義如下

代碼如下:
<div id="daohangpic">
<div id="contiar">
<div id="slides">
<div class="slide"> <a href="格萊美獲獎名單揭曉眾大腕頒獎禮現場飙歌" target="_blank"><img src="jpg" alt="Slide "> </a>
<div class="caption" >
<h>格萊美獲獎名單揭</h>
<p>格萊美獲獎名單揭曉眾大腕頒獎禮現場飙歌</p>
</div>
</div>
<div class="slide" > <a href="海內外人氣明星齊聚鳥叔林志玲大跳騎馬舞" target="_blank"><img src="jpg" alt="Slide "></a>
<div class="caption" >
<h>格萊美獲獎名單揭</h>
<p>格萊美獲獎名單揭曉眾大腕頒獎禮現場飙歌</p>
</div>
</div>
<div class="slide" > <a href="令狐沖東方不敗任盈盈三段虐戀催人淚下" target="_blank"><img src="jpg" alt="Slide "></a>
<div class="caption" >
<h>格萊美獲獎名單揭</h>
<p>格萊美獲獎名單揭曉眾大腕頒獎禮現場飙歌</p>
下 </div>
</div>
<div class="slide" > <a href="陳鍵鋒戀上剩女陳紫函人仙之戀如何收場？" target="_blank"><img src="jpg" alt="Slide "></a>
<div class="caption" >
<h>格萊美獲獎名單揭</h>
<p>格萊美獲獎名單揭曉眾大腕頒獎禮現場飙歌</p>
場？ </div>
</div>
<div class="slide" > <a href="感悟生命之美沐浴信仰之光" target="_blank"><img src="jpg" alt="Slide "></a>
<div class="caption" >
<h>格萊美獲獎名單揭</h>
<p>格萊美獲獎名單揭曉眾大腕頒獎禮現場飙歌</p>
</div>
</div>
</div>
<ul class="control_links">
</ul>
</div>
<div id="back_img"> </div>
</div> 
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20572.html