jquery實作每個數字上都帶進度條的幻燈片_jquery

記得亞馬遜沒改版之前，首頁的幻燈片我很喜歡，每個數字上面都帶有進度條。
閒的無聊，自己實現了一個。用的jquery。
主要用到animate（）方法，
因為有進度條的播放過程。
不支援ie6，當然，改改還是可以的。
示範
下載
先看效果圖
 
看程式碼吧：

複製程式碼

程式碼如下:

;

*{padding: 0;margin:0;}
ul li{list-style: none;}
.slideplay ,.slideshow{
位置：相對;
}
.slideshow li{
位置：絕對;
左：0;
上：0;
顯示：無;
}
.loadbar{
顯示：無;
}
.loadbar{
位置：絕對；
底部：60px;
左：250px;
z 索引：9;
}
.loadbar li{
寬度：40px;
高度：20px ;
浮動：左；
位置：相對；
右邊距：5px;
邊框半徑：2px;
邊框：1px實線#e5f9ff;
}
. loadbar span{
位置：絕對；
左：0;
頂部：0；
高度：20px;
寬度：40px;
文字對齊：居中；
zzz：40px;
文字對齊：居中；
zz索引：12;
遊​​標：指標；
顏色：#fff;
邊框半徑：2px;
}
.loadbar em{
位置：絕對；
左：左： 0;
頂部：0;
高度：20px;
背景：#31d81a;
z 索引：10;
邊框半徑：2px;
不透明度：0.7
}
.zindex{
z-index：1;
}
樣式>
;
頭>

;

;

• 


• 


• 
  
• 


• 

;

• 
  1;
  
  


• 
  2跨度>
  em>
  


• 
  3
  
  


• 
  4
  
  


• 
  5跨度>
  
  

$(function(){
var Slide = $('.slideplay'),
ulShow = $('.slideshow'),
sLi = ulShow.find('li'),
bLi = $('.loadbar li' ),
len = sLi.length;
var option ={
速度:3000,
barWidth:40
},
barSpeed = option.speed-100; var w = sLi.first().width(),
h = sLi.first().height();
var flag = 0,
timer = null;
ulShow.css( {
寬度:w 'px',
高度:h 'px'
});
slide.css({
寬度:w 'px',
高度:h 'px'
});
init();
函數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); '滑鼠懸停',handPattern);
}
函數handPattern(){
doStop();
flag = $(this).index();
imgMove(); bLi.find('em').css('width',0);
bLi.eq(flag).find('em').width(option.barWidth);
}
函數doStop(){
timer && clearTimeout(timer)
bLi. eq(flag).find('em').stop();
}
function doAuto(){
var em = bLi.eq(flag).find('em'),
w = em.width(),
leftW = 選項。 barWidth - w ,
sec = (leftW * barSpeed)/option.barWidth;
em.animate({width:option.barWidth},sec,function(){
if(flag==len- 1){
em.width(0);
next() ;
}其他{
下一個()
}
});
}
函數next(){
標誌;
flag==len && (flag=0);
doMove();
}
函數doMove(){
imgMove();
loadbarMove();
}
function imgMove(){
sLi.eq(flag).addClass('zindex').fadeIn('slow')
.siblings(). removeClass('zindex').淡出('慢');
}
函數loadbarMove(){
bLi.eq(flag).find('em').
animate({width :option.barWidth},barSpeed,function(){
if(flag==len-1){
bLi.find('em').width(0);
下一個();
}其他{
下一個()
}
});
}
})

身體>