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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
JavaScript创建对象的常用方式总结
Aug 10 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
vue通过过滤器实现数据格式化
Jul 20 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
PHP判断指定时间段的2个方法
2014/03/14 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
Django验证码的生成与使用示例
2017/05/20 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
django定期执行任务(实例讲解)
2017/11/03 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
ubuntu上安装python的实例方法
2019/09/30 Python
Python标准库itertools的使用方法
2020/01/17 Python
logging level级别介绍
2020/02/21 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
员工培训邀请函
2014/01/11 职场文书
销售口号大全
2014/06/11 职场文书
片区教研活动总结
2014/07/02 职场文书
小学班主任研修日志
2015/11/13 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书