在做校园网视频网站的时候，首页有一个导航页面要实现滚动效果，有样例，但代码是在难弄懂，貌似网页设计这块还是只有自己的代码自己懂，索性就仿造别人的效果自己做了一个，大体上还行，看起来还是比较流畅的，不次于原作的幺。
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);
});
要实现滚动的区域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>
