带进度条的jquery幻灯片。
记得亚马逊没改版之前，首页的幻灯片我很喜欢，每个数字上面都带有进度条。
闲的无聊，自己实现了一个。用的jquery。
主要用到animate（）方法，
因为有一个进度条的播放过程。
不支持ie6，当然，改改还是可以的。
先看下效果图
看代码吧：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>slide play with loadbar--by loethen</title> 5 <meta charset='utf-8'> 6 <style> 7 *{padding: 0;margin:0;} 8 ul li{list-style: none;} 9 .slideplay ,.slideshow{ 10 position: relative; 11 } 12 .slideshow li{ 13 position: absolute; 14 left: 0; 15 top: 0; 16 display: none; 17 } 18 .loadbar{ 19 position: absolute; 20 bottom: 60px; 21 left: 250px; 22 z-index: 9; 23 } 24 .loadbar li{ 25 width: 40px; 26 height: 20px; 27 float: left; 28 position: relative; 29 margin-right: 5px; 30 border-radius: 2px; 31 border: 1px solid #e5f9ff; 32 } 33 .loadbar span{ 34 position: absolute; 35 left: 0; 36 top: 0; 37 height: 20px; 38 width: 40px; 39 text-align: center; 40 z-index: 12; 41 cursor: pointer; 42 color: #fff; 43 border-radius: 2px; 44 } 45 .loadbar em{ 46 position: absolute; 47 left: 0; 48 top: 0; 49 height: 20px; 50 background: #31d81a; 51 z-index: 10; 52 border-radius: 2px; 53 opacity: 0.7 54 } 55 .zindex{ 56 z-index: 1; 57 } 58 </style> 59 <script src='js/jquery.min.js'></script> 60 </head> 61 <body> 62 <div id="slideplay" class='slideplay'> 63 <ul class='slideshow'> 64 <li><img src="images/a.jpg" alt=""></li> 65 <li><img src="images/b.jpg" alt=""></li> 66 <li><img src="images/c.jpg" alt=""></li> 67 <li><img src="images/d.jpg" alt=""></li> 68 <li><img src="images/e.jpg" alt=""></li> 69 </ul> 70 <ul class='loadbar clearfix'> 71 <li> 72 <span>1</span> 73 <em></em> 74 </li> 75 <li> 76 <span>2</span> 77 <em></em> 78 </li> 79 <li> 80 <span>3</span> 81 <em></em> 82 </li> 83 <li> 84 <span>4</span> 85 <em></em> 86 </li> 87 <li> 88 <span>5</span> 89 <em></em> 90 </li> 91 </ul> 92 </div> 93 <script type='text/javascript'> 94 $(function(){ 95 var slide = $('.slideplay'), 96 ulShow = $('.slideshow'), 97 sLi = ulShow.find('li'), 98 bLi = $('.loadbar li'), 99 len = sLi.length; 100 101 var option ={ 102 speed:3000, 103 barWidth:40 104 }, 105 barSpeed = option.speed-100; 106 107 var w = sLi.first().width(), 108 h = sLi.first().height(); 109 110 var flag = 0, 111 timer = null; 112 113 ulShow.css({ 114 width:w+'px', 115 height:h+'px' 116 }); 117 slide.css({ 118 width:w+'px', 119 height:h+'px' 120 }); 121 122 init(); 123 function init(){ 125 sLi.eq(flag).addClass('zindex').show(); 126 bLi.eq(flag).find('em').animate({width:option.barWidth},barSpeed); 127 timer = setTimeout(function(){ 128 next(); 129 },option.speed); 130 131 ulShow.on('mouseover',doStop); 132 ulShow.on('mouseleave',doAuto); 133 bLi.on('mouseover',handPattern); 134 135 } 136 function handPattern(){ 137 doStop(); 138 139 flag = $(this).index(); 140 imgMove(); 141 142 bLi.find('em').css('width',0); 143 bLi.eq(flag).find('em').width(option.barWidth); 144 } 145 function doStop(){ 146 timer && clearTimeout(timer); 147 bLi.eq(flag).find('em').stop(); 148 } 149 function doAuto(){ 150 var em = bLi.eq(flag).find('em'), 151 w = em.width(), 152 leftW = option.barWidth - w , 153 sec = (leftW * barSpeed)/option.barWidth; 154 155 em.animate({width:option.barWidth},sec,function(){ 156 if(flag==len-1){ 157 em.width(0); 158 next(); 159 }else{ 160 next(); 161 } 162 }); 163 } 164 function next(){ 165 flag++; 166 flag==len && (flag=0); 167 doMove(); 168 } 169 function doMove(){ 170 imgMove(); 171 loadbarMove(); 172 } 173 function imgMove(){ 174 sLi.eq(flag).addClass('zindex').fadeIn('slow') 175 .siblings().removeClass('zindex').fadeOut('slow'); 176 } 177 function loadbarMove(){ 178 bLi.eq(flag).find('em'). 179 animate({width:option.barWidth},barSpeed,function(){ 180 if(flag==len-1){ 181 bLi.find('em').width(0); 182 next(); 183 }else{ 184 next(); 185 } 186 }); 187 } 188 }) 189 190 </script> 191 </body> 192 </html>
