jquery实现的一个导航滚动效果具体代码
人气:0
在做校园网视频网站的时候，首页有一个导航页面要实现滚动效果，有样例，但代码是在难弄懂，貌似网页设计这块还是只有自己的代码自己懂，索性就仿造别人的效果自己做了一个，大体上还行，看起来还是比较流畅的，不次于原作的幺。
现在先把代码拷贝到这里，以后再逐一简化修改：
实现滚动效果，脚本代码如下：
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 href="http://2.zutvideo.duapp.com/Detail.action?v=687474703A2F2F6D392E6E65746B75752E636F6D2F662F7A792F35356A696567656C61696D656962616E6A69616E676469616E6C692F312E6D6B76" title="格莱美获奖名单揭晓，众大腕颁奖礼现场飙歌" target="_blank"><img src="22080.jpg" alt="Slide 1"> </a>
<div class="caption" >
<h2>格莱美获奖名单揭</h2>
<p>格莱美获奖名单揭晓，众大腕颁奖礼现场飙歌</p>
</div>
</div>
<div class="slide" > <a href="http://2.zutvideo.duapp.com/Detail.action?v=687474703A2F2F6D392E6E65746B75752E636F6D2F662F7A792F6265696A696E67776569736869323031336368756E77616E2F312E6D6B76" title="海内外人气明星齐聚，鸟叔林志玲大跳骑马舞" target="_blank"><img src="22076.jpg" alt="Slide 1"></a>
<div class="caption" >
<h2>格莱美获奖名单揭</h2>
<p>格莱美获奖名单揭晓，众大腕颁奖礼现场飙歌</p>
</div>
</div>
<div class="slide" > <a href="http://2.zutvideo.duapp.com/Detail.action?v=687474703A2F2F6D392E6E65746B75752E636F6D2F662F6C786A2F78696E7869616F616F6A69616E6768752F2A2A2E6D6B76" title="令狐冲、东方不败、任盈盈三段虐恋催人泪下" target="_blank"><img src="22073.jpg" alt="Slide 1"></a>
<div class="caption" >
<h2>格莱美获奖名单揭</h2>
<p>格莱美获奖名单揭晓，众大腕颁奖礼现场飙歌</p>
下 </div>
</div>
<div class="slide" > <a href="http://2.zutvideo.duapp.com/Detail.action?v=687474703A2F2F6D382E6E65746B75752E636F6D2F672F6C786A2F736F757368656E6A692F2A2A2E6D6B76" title="陈键锋恋上剩女陈紫函，人仙之恋如何收场？" target="_blank"><img src="22050.jpg" alt="Slide 1"></a>
<div class="caption" >
<h2>格莱美获奖名单揭</h2>
<p>格莱美获奖名单揭晓，众大腕颁奖礼现场飙歌</p>
场？ </div>
</div>
<div class="slide" > <a href="http://2.zutvideo.duapp.com/Detail.action?v=687474703A2F2F6D382E6E65746B75752E636F6D2F662F64792F7368616F6E69616E706169646571696875616E7069616F6C69752F312E6D6B76" 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>
现在先把代码拷贝到这里，以后再逐一简化修改：
实现滚动效果，脚本代码如下：
复制代码 代码如下:
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 href="http://2.zutvideo.duapp.com/Detail.action?v=687474703A2F2F6D392E6E65746B75752E636F6D2F662F7A792F35356A696567656C61696D656962616E6A69616E676469616E6C692F312E6D6B76" title="格莱美获奖名单揭晓，众大腕颁奖礼现场飙歌" target="_blank"><img src="22080.jpg" alt="Slide 1"> </a>
<div class="caption" >
<h2>格莱美获奖名单揭</h2>
<p>格莱美获奖名单揭晓，众大腕颁奖礼现场飙歌</p>
</div>
</div>
<div class="slide" > <a href="http://2.zutvideo.duapp.com/Detail.action?v=687474703A2F2F6D392E6E65746B75752E636F6D2F662F7A792F6265696A696E67776569736869323031336368756E77616E2F312E6D6B76" title="海内外人气明星齐聚，鸟叔林志玲大跳骑马舞" target="_blank"><img src="22076.jpg" alt="Slide 1"></a>
<div class="caption" >
<h2>格莱美获奖名单揭</h2>
<p>格莱美获奖名单揭晓，众大腕颁奖礼现场飙歌</p>
</div>
</div>
<div class="slide" > <a href="http://2.zutvideo.duapp.com/Detail.action?v=687474703A2F2F6D392E6E65746B75752E636F6D2F662F6C786A2F78696E7869616F616F6A69616E6768752F2A2A2E6D6B76" title="令狐冲、东方不败、任盈盈三段虐恋催人泪下" target="_blank"><img src="22073.jpg" alt="Slide 1"></a>
<div class="caption" >
<h2>格莱美获奖名单揭</h2>
<p>格莱美获奖名单揭晓，众大腕颁奖礼现场飙歌</p>
下 </div>
</div>
<div class="slide" > <a href="http://2.zutvideo.duapp.com/Detail.action?v=687474703A2F2F6D382E6E65746B75752E636F6D2F672F6C786A2F736F757368656E6A692F2A2A2E6D6B76" title="陈键锋恋上剩女陈紫函，人仙之恋如何收场？" target="_blank"><img src="22050.jpg" alt="Slide 1"></a>
<div class="caption" >
<h2>格莱美获奖名单揭</h2>
<p>格莱美获奖名单揭晓，众大腕颁奖礼现场飙歌</p>
场？ </div>
</div>
<div class="slide" > <a href="http://2.zutvideo.duapp.com/Detail.action?v=687474703A2F2F6D382E6E65746B75752E636F6D2F662F64792F7368616F6E69616E706169646571696875616E7069616F6C69752F312E6D6B76" 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>
加载全部内容