记得亚马逊没改版之前,首页的幻灯片我很喜欢,每个数字上面都带有进度条。 闲的无聊,自己实现了一个。用的jquery。 主要用到animate()方法, 因为有一个进度条的播放过程。 不支持ie6,当然,改改还是可以的。演示 下载先看下效果图 看代码吧: 复制代码 代码如下: slide play with loadbar--by loethen <BR>*{padding: 0;margin:0;} <BR>ul li{list-style: none;} <BR>.slideplay ,.slideshow{ <BR>position: relative; <BR>} <BR>.slideshow li{ <BR>position: absolute; <BR>left: 0; <BR>top: 0; <BR>display: none; <BR>} <BR>.loadbar{ <BR>position: absolute; <BR>bottom: 60px; <BR>left: 250px; <BR>z-index: 9; <BR>} <BR>.loadbar li{ <BR>width: 40px; <BR>height: 20px; <BR>float: left; <BR>position: relative; <BR>margin-right: 5px; <BR>border-radius: 2px; <BR>border: 1px solid #e5f9ff; <BR>} <BR>.loadbar span{ <BR>position: absolute; <BR>left: 0; <BR>top: 0; <BR>height: 20px; <BR>width: 40px; <BR>text-align: center; <BR>z-index: 12; <BR>cursor: pointer; <BR>color: #fff; <BR>border-radius: 2px; <BR>} <BR>.loadbar em{ <BR>position: absolute; <BR>left: 0; <BR>top: 0; <BR>height: 20px; <BR>background: #31d81a; <BR>z-index: 10; <BR>border-radius: 2px; <BR>opacity: 0.7 <BR>} <BR>.zindex{ <BR>z-index: 1; <BR>} <BR> 1 2 3 4 5 <BR>$(function(){ <BR>var slide = $('.slideplay'), <BR>ulShow = $('.slideshow'), <BR>sLi = ulShow.find('li'), <BR>bLi = $('.loadbar li'), <BR>len = sLi.length; <BR>var option ={ <BR>speed:3000, <BR>barWidth:40 <BR>}, <BR>barSpeed = option.speed-100; <BR>var w = sLi.first().width(), <BR>h = sLi.first().height(); <BR>var flag = 0, <BR>timer = null; <BR>ulShow.css({ <BR>width:w+'px', <BR>height:h+'px' <BR>}); <BR>slide.css({ <BR>width:w+'px', <BR>height:h+'px' <BR>}); <BR>init(); <BR>function init(){ <BR>sLi.eq(flag).addClass('zindex').show(); <BR>bLi.eq(flag).find('em').animate({width:option.barWidth},barSpeed); <BR>timer = setTimeout(function(){ <BR>next(); <BR>},option.speed); <BR>ulShow.on('mouseover',doStop); <BR>ulShow.on('mouseleave',doAuto); <BR>bLi.on('mouseover',handPattern); <BR>} <BR>function handPattern(){ <BR>doStop(); <BR>flag = $(this).index(); <BR>imgMove(); <BR>bLi.find('em').css('width',0); <BR>bLi.eq(flag).find('em').width(option.barWidth); <BR>} <BR>function doStop(){ <BR>timer && clearTimeout(timer); <BR>bLi.eq(flag).find('em').stop(); <BR>} <BR>function doAuto(){ <BR>var em = bLi.eq(flag).find('em'), <BR>w = em.width(), <BR>leftW = option.barWidth - w , <BR>sec = (leftW * barSpeed)/option.barWidth; <BR>em.animate({width:option.barWidth},sec,function(){ <BR>if(flag==len-1){ <BR>em.width(0); <BR>next(); <BR>}else{ <BR>next(); <BR>} <BR>}); <BR>} <BR>function next(){ <BR>flag++; <BR>flag==len && (flag=0); <BR>doMove(); <BR>} <BR>function doMove(){ <BR>imgMove(); <BR>loadbarMove(); <BR>} <BR>function imgMove(){ <BR>sLi.eq(flag).addClass('zindex').fadeIn('slow') <BR>.siblings().removeClass('zindex').fadeOut('slow'); <BR>} <BR>function loadbarMove(){ <BR>bLi.eq(flag).find('em'). <BR>animate({width:option.barWidth},barSpeed,function(){ <BR>if(flag==len-1){ <BR>bLi.find('em').width(0); <BR>next(); <BR>}else{ <BR>next(); <BR>} <BR>}); <BR>} <BR>}) <BR>