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

2019-11-20 22:41:09

字體：大中小

來源：轉載

供稿：網友

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

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

復制代碼代碼如下:

 
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;i<all;i++){ 
contiar.append("<li></li>"); 
} 
$('.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{ 
border:none; 
} 
#daohangpic { 
width:1000px; 
margin:0 auto; 
padding:20px; 
overflow:hidden; 
} 
#daohangpic img { 
height:380px; 
width:980px; 
} 

#contiar { 
position:relative; 
width:980px; 
height:380px; 
overflow:hidden; 
margin:0 auto; 
} 
#slides { 
position:absolute; 
border:none; 
} 
.slide { 
float:left; 
width:980px; 
height:380px; 
overflow:hidden; 
border:none; 
} 
.control_links{ 
position:absolute; 
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; 
background:#333; 
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; 
} 

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

復制代碼代碼如下:

 
<div id="daohangpic"> 
<div id="contiar"> 
<div id="slides"> 
<div class="slide"> <a  title="格萊美獲獎名單揭曉，眾大腕頒獎禮現場飆歌" target="_blank"><img src="22080.jpg" alt="Slide 1"> </a> 
<div class="caption" > 
<h2>格萊美獲獎名單揭</h2> 
<p>格萊美獲獎名單揭曉，眾大腕頒獎禮現場飆歌</p> 
</div> 
</div> 
<div class="slide" > <a  title="海內外人氣明星齊聚，鳥叔林志玲大跳騎馬舞" target="_blank"><img src="22076.jpg" alt="Slide 1"></a> 
<div class="caption" > 
<h2>格萊美獲獎名單揭</h2> 
<p>格萊美獲獎名單揭曉，眾大腕頒獎禮現場飆歌</p> 
</div> 
</div> 
<div class="slide" > <a  title="令狐沖、東方不敗、任盈盈三段虐戀催人淚下" target="_blank"><img src="22073.jpg" alt="Slide 1"></a> 
<div class="caption" > 
<h2>格萊美獲獎名單揭</h2> 
<p>格萊美獲獎名單揭曉，眾大腕頒獎禮現場飆歌</p> 
下 </div> 
</div> 
<div class="slide" > <a  title="陳鍵鋒戀上剩女陳紫函，人仙之戀如何收場？" target="_blank"><img src="22050.jpg" alt="Slide 1"></a> 
<div class="caption" > 
<h2>格萊美獲獎名單揭</h2> 
<p>格萊美獲獎名單揭曉，眾大腕頒獎禮現場飆歌</p> 
場？ </div> 
</div> 
<div class="slide" > <a  title="感悟生命之美，沐浴信仰之光" target="_blank"><img src="22014.jpg" alt="Slide 1"></a> 
<div class="caption" > 
<h2>格萊美獲獎名單揭</h2> 
<p>格萊美獲獎名單揭曉，眾大腕頒獎禮現場飆歌</p> 
</div> 
</div> 
</div> 
<ul class="control_links"> 
</ul> 
</div> 
<div id="back_img"> </div> 
</div> 