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

• 点赞
• 收藏
• 分享
• 文章举报

dbd557957 发布了0 篇原创文章 · 获赞 0 · 访问量 78 私信 关注