使用負載欄滑動播放--作者: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;
}
樣式>
;
頭>
$(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);
下一個();
}其他{
下一個()
}
});
}
})
身體>