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;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');

 

 });

  

　　　//一下为一个循环执行的页面切换函数，每隔5秒切换一回

 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;

}

 

 

要实现滚动的区域html代码如下：

 

<div id="daohangpic">

<div id="contiar">

<div id="slides">

　　<div class="slide">

　　　　<a href="" ><img src="" > </a>

　　　　<div class="caption" ></div>

　　</div>

　　<div class="slide"> <a href=""></a>

　　　　<div class="caption" ></div>

　　</div>

　　<div class="slide"><a href=""></a>

　　　　<div class="caption">

　　</div>

　　<div class="slide"><a href=""></a>

　　　　<div class="caption">

　　</div>

</div>

</div>

</div>

 

 

 

 

 

 

转载于:https://www.cnblogs.com/kyyblabla/archive/2013/05/26/3100529.html