看代码吧:
首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 17:41:55
原創
957 人瀏覽過

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

程式碼如下:




使用負載欄滑動播放--作者:loethen
;

*{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);
下一個();
}其他{
下一個()
}
});
}
})

身體>
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板