jquery实现的一个导航滚动效果具体代码


Posted in Javascript onMay 27, 2013

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

现在先把代码拷贝到这里,以后再逐一简化修改:
实现滚动效果,脚本代码如下:

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>
Javascript 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
Javascript 构造函数详解
Oct 22 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 #Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 #Javascript
jQuery函数的等价原生函数代码示例
May 27 #Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 #Javascript
jQuery动态地获取系统时间实现代码
May 24 #Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 #Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 #Javascript
You might like
综合图片计数器
2006/10/09 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
PDO::query讲解
2019/01/29 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
基于jquery的超简单上下翻
2010/04/20 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
Python获取当前时间的方法
2014/01/14 Python
爬山算法简介和Python实现实例
2014/04/26 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
护理学毕业生求职信
2013/11/14 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
介绍信的格式
2015/01/30 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
基层党支部承诺书
2015/04/30 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL