jquery实现每个数字上都带进度条的幻灯片


Posted in Javascript onFebruary 20, 2013

记得亚马逊没改版之前,首页的幻灯片我很喜欢,每个数字上面都带有进度条。
闲的无聊,自己实现了一个。用的jquery。
主要用到animate()方法,
因为有一个进度条的播放过程。
不支持ie6,当然,改改还是可以的。
演示
下载
先看下效果图
jquery实现每个数字上都带进度条的幻灯片 
看代码吧:

<!DOCTYPE html> 
<html> 
<head> 
<title>slide play with loadbar--by loethen</title> 
<meta charset='utf-8'> 
<style> 
*{padding: 0;margin:0;} 
ul li{list-style: none;} 
.slideplay ,.slideshow{ 
position: relative; 
} 
.slideshow li{ 
position: absolute; 
left: 0; 
top: 0; 
display: none; 
} 
.loadbar{ 
position: absolute; 
bottom: 60px; 
left: 250px; 
z-index: 9; 
} 
.loadbar li{ 
width: 40px; 
height: 20px; 
float: left; 
position: relative; 
margin-right: 5px; 
border-radius: 2px; 
border: 1px solid #e5f9ff; 
} 
.loadbar span{ 
position: absolute; 
left: 0; 
top: 0; 
height: 20px; 
width: 40px; 
text-align: center; 
z-index: 12; 
cursor: pointer; 
color: #fff; 
border-radius: 2px; 
} 
.loadbar em{ 
position: absolute; 
left: 0; 
top: 0; 
height: 20px; 
background: #31d81a; 
z-index: 10; 
border-radius: 2px; 
opacity: 0.7 
} 
.zindex{ 
z-index: 1; 
} 
</style> 
<script src='js/jquery.min.js'></script> 
</head> 
<body> 
<div id="slideplay" class='slideplay'> 
<ul class='slideshow'> 
<li><img src="images/a.jpg" alt=""></li> 
<li><img src="images/b.jpg" alt=""></li> 
<li><img src="images/c.jpg" alt=""></li> 
<li><img src="images/d.jpg" alt=""></li> 
<li><img src="images/e.jpg" alt=""></li> 
</ul> 
<ul class='loadbar clearfix'> 
<li> 
<span>1</span> 
<em></em> 
</li> 
<li> 
<span>2</span> 
<em></em> 
</li> 
<li> 
<span>3</span> 
<em></em> 
</li> 
<li> 
<span>4</span> 
<em></em> 
</li> 
<li> 
<span>5</span> 
<em></em> 
</li> 
</ul> 
</div> 
<script type='text/javascript'> 
$(function(){ 
var slide = $('.slideplay'), 
ulShow = $('.slideshow'), 
sLi = ulShow.find('li'), 
bLi = $('.loadbar li'), 
len = sLi.length; 
var option ={ 
speed:3000, 
barWidth:40 
}, 
barSpeed = option.speed-100; 
var w = sLi.first().width(), 
h = sLi.first().height(); 
var flag = 0, 
timer = null; 
ulShow.css({ 
width:w+'px', 
height:h+'px' 
}); 
slide.css({ 
width:w+'px', 
height:h+'px' 
}); 
init(); 
function init(){ 
sLi.eq(flag).addClass('zindex').show(); 
bLi.eq(flag).find('em').animate({width:option.barWidth},barSpeed); 
timer = setTimeout(function(){ 
next(); 
},option.speed); 
ulShow.on('mouseover',doStop); 
ulShow.on('mouseleave',doAuto); 
bLi.on('mouseover',handPattern); 
} 
function handPattern(){ 
doStop(); 
flag = $(this).index(); 
imgMove(); 
bLi.find('em').css('width',0); 
bLi.eq(flag).find('em').width(option.barWidth); 
} 
function doStop(){ 
timer && clearTimeout(timer); 
bLi.eq(flag).find('em').stop(); 
} 
function doAuto(){ 
var em = bLi.eq(flag).find('em'), 
w = em.width(), 
leftW = option.barWidth - w , 
sec = (leftW * barSpeed)/option.barWidth; 
em.animate({width:option.barWidth},sec,function(){ 
if(flag==len-1){ 
em.width(0); 
next(); 
}else{ 
next(); 
} 
}); 
} 
function next(){ 
flag++; 
flag==len && (flag=0); 
doMove(); 
} 
function doMove(){ 
imgMove(); 
loadbarMove(); 
} 
function imgMove(){ 
sLi.eq(flag).addClass('zindex').fadeIn('slow') 
.siblings().removeClass('zindex').fadeOut('slow'); 
} 
function loadbarMove(){ 
bLi.eq(flag).find('em'). 
animate({width:option.barWidth},barSpeed,function(){ 
if(flag==len-1){ 
bLi.find('em').width(0); 
next(); 
}else{ 
next(); 
} 
}); 
} 
}) 
</script> 
</body> 
</html>
Javascript 相关文章推荐
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
javascript通过class来获取元素实现代码
Feb 20 #Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 #Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 #Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 #Javascript
JS刷新框架外页面七种实现代码
Feb 18 #Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 #Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 #Javascript
You might like
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
python内置数据类型之列表操作
2018/11/12 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
Python如何读写字节数据
2020/08/05 Python
python批量修改交换机密码的示例
2020/09/22 Python
酒店总经理工作职责
2013/12/13 职场文书
即兴演讲稿
2014/01/04 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
新农村建设典型材料
2014/05/31 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
2014年人事部工作总结
2014/12/03 职场文书
先进基层党组织材料
2014/12/25 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL