jquery实现每个数字上都带进度条的幻灯片_jquery
来源：速财网
记得亚马逊没改版之前，首页的幻灯片我很喜欢，每个数字上面都带有进度条。
闲的无聊，自己实现了一个。用的jquery。
主要用到animate（）方法，
因为有一个进度条的播放过程。
不支持ie6，当然，改改还是可以的。
演示
下载
先看下效果图
看代码吧：
代码如下:
slide play with loadbar--by loethen
1
2
3
4
5
$(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();
}
});
}
})
显示全文