记得亚马逊没改版之前，首页的幻灯片我很喜欢，每个数字上面都带有进度条。闲的无聊，自己实现了一个。用的jquery。主要用到动画()方法，因为有一个进度条的播放过程。不支持ie6，当然，改改还是可以的。演示下载先看下效果图

看代码吧：复制代码代码如下：DOCTYPE html html标题带加载条的幻灯片播放-by loeset/title meta charset=' utf-8 ' style * { padd : 0；margin :0 } ul Li { list-style : none；} .幻灯片播放。幻灯片显示{位置：相对；} .幻灯片Li { position : absolute eleft : 0；top : 0；显示器：无；} .负载杆{位置：绝对值；bottom : 60pxleft : 250 pxz-index : 9；} .负载杆li {宽度： 40像素重量： 20像素向左浮动：相对位置：右边距： 5px边界半径： 2pxborder: 1px固体# e5f 9 ff} .测力杆跨度{绝对位置：左： 0；top : 0；高度： 20像素宽度： 40px文本对齐：中心；z指数： 12；光标：指针；color : # fffborder-radius : 2px；} .加载栏em {位置：绝对；左： 0；top : 0；高度： 20像素背景技术# 31d 81 az-指数： 10；边界半径： 2pxopacity: 0.7 } .zindex { z-index : 1；}/style脚本src=' js/jquery。量滴js/script/head body div id=' slide play ' class=' slide play ' ul class=' slide play ' liimg src=' http : images/a . jpg ' alt=' '/Li liimg src=' http : images/b . jpg ' alt=' '/Li liimg src=' http : images/c . jpg ' alt=' '/Li liimg src=' httpslideplay ')、ulShow=$(幻灯片显示)，sLi=ulShow.find('li ')，bLi=$(').load bar Li’)，len=SlI . length var option={ speed :3000，barWidth:40 }，bar speed=option。速度-100；var w=sLi.first().宽度()，h=sLi.first().高度();定义变量标志=0,定时器=NullShow . CSS({ width : w ' px，height :h ' px ' })；slide.css({ width:w 'px '，height :h ' px ' })；init()；函数init(){ sLi.eq(标志)。addClass('zindex ').show()；bLi.eq(标志)。查找(' em ').动画({width:option.barWidth}，bar speed)；timer=setTimeout(function(){ next()；}，选项。速度)；ulShow.on('mouseover '，Dostop)；ulShow.on('mouseleave '，DOauto)；bLi.on('鼠标悬停'，掌纹);} function HandAtten(){ DostOp()；flag=$(this).index()；imgMove()；bLi.find('em ').css('width '，0)；bLi.eq(标志)。查找(' em ').宽度（选项。条宽)；}函数doStop(){ timer clearTimeout(计时器);bLi.eq(标志)。查找(' em ').stop()；}函数doAuto(){ var em=bLi.eq(标志).find('em ')，w=em.width()，left=option。杆宽-w，秒=(左*杆速)/选项。条形宽度；艾米。动画({ width :选项。bar width }，sec，function(){ if(flag==len-1){ em。宽度(0)；next()；} else { next()；} });}函数next(){ flag；flag==len(flag=0)；doMove()；}函数doMove(){ imgMove()；loadbarMove()；}函数imgMove(){ sLi.eq(标志)。addClass('zindex ').fadeIn("慢")。兄弟姐妹()。removeClass('zindex ').fadeOut("慢");}函数loadbarMove(){ bLi.eq(标志)。查找(' em ').动画({ width :选项。bar width }、barSpeed、function(){ if(flag==len-1){ BLi。查找(' em ').宽度(0);next()；} else { next()；} });} })/脚本/正文/html