jquery實現的一個導航滾動效果具體代碼_jquery

在做校園網視訊網站的時候，首頁有一個導航頁面要實現滾動效果，有樣例，但代碼是在難弄懂，貌似網頁設計這塊還是只有自己的代碼自己懂，索性就彷造別人的效果自己做了一個，大體上還行，看起來還是比較流暢的，不次於原作的廬。

現在先把程式碼拷貝到這裡，以後再逐一簡化修改：
實現捲動效果，腳本程式碼如下：

複製程式碼

複製程式碼

程式碼如下:


var all=0;
var no=0;
var s_width=0;
$(document).ready( function(){
all=$('.slide').length;
s_width=$('.slide').eq(0).width();
$("#slides" ).css('width',all*s_width);
var contiar=$('.control_links');
for(var i=0;icontiar.append ("

");
}
$('.control_links li').bind('click mouseenter',function(){
var index=$(this). index();
no=index;
var no_= no%all;
$("#slides").animate({left:(-1*no_*s_width) 'px'}, 200);
$(this).css('background-color','#fff');
$(this).siblings().css('background-color','#333') ;
});
setInterval(function(){
var no_= no%all;
$("#slides").animate({left:(-1*no_*s_width) 'px'},1000);
var curr= $('.control_links li').eq(no_);
curr.css('background-color','#fff')
curr .siblings().css('background-color','#333');

no ;
},5000);
});

css 程式碼如下:

複製程式碼

程式碼如下:


img{
borderbone; >}
#daohangpic {
width:1000px;
margin:0 auto;
padding:20px;
overflow:hidden;
}
#danpic img> >height:380px;
width:980px;
}

#contiar {
position:relative;
width:980px;
height:380pf; :hidden;
margin:0 auto;
}
#slides {
position:absolute;
border:none;
}
.slide {
float:>float: left;
width:980px;
height:380px;
overflow:hidden;
border:none;
}
.control_links{
>
}; bottom:10px;
right:10px;
z-index:200;
}
.control_links,.control_links li {
list-style: none;
}
.control_links li {
float:left;
width: 15px;
height: 15px;
margin-right: 5px;
text-align: center; ;
border: 1px solid #666;
cursor: pointer;
opacity:0.5;
}
.caption {
position:absolute
height:50px; 🎜>width:100%;
background-color:#000;
bottom:0px;
padding-left:20px;
padding-top:10px;
overflow:hidden;
z-index:100;
background:url(hdpng.png) no-repeat scroll 0 -1px;
}
.caption h2 {
color: #FFF;
font -size: 17px;
font-weight: bold;
line-height:25px;
}
.caption p{
display: block;
color: #767676; 🎜>font-size:12px;
line-height:15px;
}


要實作捲動的區域定義如下：

複製程式碼 程式碼如下:

葛萊美獲獎名單揭

格萊美獲獎名單揭曉，眾大腕頒獎禮現場飆歌

格萊美獲獎名單揭曉

格萊美獲獎名單揭曉，眾大腕頒獎禮現場飆歌

格萊美獲獎名單揭

格萊美獲獎名單揭曉，眾大腕頒獎禮現場飆歌

下

葛萊美獲獎名單揭

葛萊美獲獎名單揭曉，眾大腕頒獎禮現場飆歌

場？ ="slide" >

葛萊美獲獎名單揭

葛萊美獎名單揭曉，眾大腕頒獎禮現場飆歌