快捷導(dǎo)航

jquery實(shí)現(xiàn)每個(gè)數(shù)字上都帶進(jìn)度條的幻燈片

更新時(shí)間：2013年02月20日 16:35:38 作者：

瀏覽網(wǎng)頁時(shí)不小心會(huì)碰到這樣的一個(gè)網(wǎng)站有幻燈片而且每個(gè)數(shù)字上面都帶有進(jìn)度條閑的無聊,自己用jquery實(shí)現(xiàn)了一個(gè),因?yàn)橛幸粋€(gè)進(jìn)度條的播放過程暫不支持ie6，熱愛特效的你可不要錯(cuò)過了哈

記得亞馬遜沒改版之前，首頁的幻燈片我很喜歡，每個(gè)數(shù)字上面都帶有進(jìn)度條。
閑的無聊，自己實(shí)現(xiàn)了一個(gè)。用的jquery。
主要用到animate（）方法，
因?yàn)橛幸粋€(gè)進(jìn)度條的播放過程。
不支持ie6，當(dāng)然，改改還是可以的。
演示
下載
先看下效果圖

看代碼吧：

復(fù)制代碼代碼如下:

 
<!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> 