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 相关文章推荐
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
复制js对象方法(详解)
Jul 08 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
使用 Opentype.js 生成字体子集的实例代码详解
May 25 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
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
javascript 常用功能总结
2012/03/18 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
python实现感知器算法(批处理)
2019/01/18 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
党员干部承诺书范文
2014/03/25 职场文书
产品质量承诺书
2014/03/27 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
企业百日安全活动总结
2015/05/07 职场文书
初中家长意见
2015/06/03 职场文书
建议书的格式及范文
2015/09/14 职场文书
预备党员表决心的话
2015/09/22 职场文书
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python