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 相关文章推荐
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
js网页右下角提示框实例
Oct 14 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 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中的Session和Cookie
2013/06/21 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
js异或加解密效果代码
2008/06/25 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
python处理cookie详解
2014/02/07 Python
Python素数检测实例分析
2015/06/15 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
更新修改后的Python模块方法
2019/03/03 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python+pygame实现坦克大战
2019/09/10 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
秋季婚礼证婚词
2014/01/11 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
今日说法观后感
2015/06/08 职场文书
八月一日观后感
2015/06/10 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python