引言：最近在看一些轮播图的制作，各类轮播图真的是很有创意。咳咳，想起曾经自己做的轮播图，真是简单到拿不出手。不多说，直接show code 看看进度条的轮播图的制作思路，让我们分析学习这个带进度条的轮播图制作：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=http://www.likecs.com/\'utf-8\'> 5 <title>图片轮播</title> 6 <style> 7 *{margin:0;padding:0;} 8 .main{margin:20px auto;width:1224px;height:630px;position:relative;overflow:hidden;} 9 #imgwrap{position:absolute;top:0;left:0;width:99999px;height:500px;} 10 #imgwrap>img{float:left;} 11 12 .navswrap{position:absolute;bottom:0;left:0;width:1224px;height:167px;cursor:pointer;} 13 .nav{float:left;width:204px;height:167px;} 14 .navpic{width:204px;height:162px;background-position:right center;} 15 .nav0 .navpic{background-image:url(img/sbanner_00.png);} 16 .nav1 .navpic{background-image:url(img/sbanner_01.png);} 17 .nav2 .navpic{background-image:url(img/sbanner_02.png);} 18 .nav3 .navpic{background-image:url(img/sbanner_03.png);} 19 .nav4 .navpic{background-image:url(img/sbanner_04.png);} 20 .nav5 .navpic{background-image:url(img/sbanner_05.png);} 21 22 .prowrap{width:204px;height:5px;} 23 .pro{height:5px;width:0px;} 24 .nav0 .prowrap{background:#7b5596;} 25 .nav0 .pro{background:#49047a;} 26 .nav1 .prowrap{background:#83a2cc;} 27 .nav1 .pro{background:#13478f;} 28 .nav2 .prowrap{background:#e18e40;} 29 .nav2 .pro{background:#b94e00;} 30 .nav3 .prowrap{background:#47acab;} 31 .nav3 .pro{background:#00605f;} 32 .nav4 .prowrap{background:#c86c8c;} 33 .nav4 .pro{background:#a41a4a;} 34 .nav5 .prowrap{background:#9089d6;} 35 .nav5 .pro{background:#4a419e;} 36 </style> 37 </head> 38 <body> 39 <div class=http://www.likecs.com/\'main\'> 40 <div id=http://www.likecs.com/\'imgwrap\'> 41 <img src=http://www.likecs.com/\'img/banner_00.jpg\'> 42 <img src=http://www.likecs.com/\'img/banner_01.jpg\'> 43 <img src=http://www.likecs.com/\'img/banner_02.jpg\'> 44 <img src=http://www.likecs.com/\'img/banner_03.jpg\'> 45 <img src=http://www.likecs.com/\'img/banner_04.jpg\'> 46 <img src=http://www.likecs.com/\'img/banner_05.jpg\'> 47 </div> 48 <div class=http://www.likecs.com/\'navswrap\'> 49 <div class=http://www.likecs.com/\'nav nav0\' data-index=http://www.likecs.com/\'0\'> 50 <div class=http://www.likecs.com/\'navpic\'></div> 51 <div class=http://www.likecs.com/\'prowrap\'> 52 <div class=http://www.likecs.com/\'pro\'></div> 53 </div> 54 </div> 55 56 <div class=http://www.likecs.com/\'nav nav1\' data-index=http://www.likecs.com/\'1\'> 57 <div class=http://www.likecs.com/\'navpic\'></div> 58 <div class=http://www.likecs.com/\'prowrap\'> 59 <div class=http://www.likecs.com/\'pro\'></div> 60 </div> 61 </div> 62 63 <div class=http://www.likecs.com/\'nav nav2\' data-index=http://www.likecs.com/\'2\'> 64 <div class=http://www.likecs.com/\'navpic\'></div> 65 <div class=http://www.likecs.com/\'prowrap\'> 66 <div class=http://www.likecs.com/\'pro\'></div> 67 </div> 68 </div> 69 70 <div class=http://www.likecs.com/\'nav nav3\' data-index=http://www.likecs.com/\'3\'> 71 <div class=http://www.likecs.com/\'navpic\'></div> 72 <div class=http://www.likecs.com/\'prowrap\'> 73 <div class=http://www.likecs.com/\'pro\'></div> 74 </div> 75 </div> 76 77 <div class=http://www.likecs.com/\'nav nav4\' data-index=http://www.likecs.com/\'4\'> 78 <div class=http://www.likecs.com/\'navpic\'></div> 79 <div class=http://www.likecs.com/\'prowrap\'> 80 <div class=http://www.likecs.com/\'pro\'></div> 81 </div> 82 </div> 83 84 <div class=http://www.likecs.com/\'nav nav5\' data-index=http://www.likecs.com/\'5\'> 85 <div class=http://www.likecs.com/\'navpic\'></div> 86 <div class=http://www.likecs.com/\'prowrap\'> 87 <div class=http://www.likecs.com/\'pro\'></div> 88 </div> 89 </div> 90 </div> 91 </div> 92 <script> 93 window.onload=function(){ 94 var picnum=6; //图片数量 95 var picwidth=1224;//图片总长 96 var picinterval=20;//????每次前进移动的间隔 97 var picduration=500;//持续时间 98 var prointerval=20;//每次前进移动的间隔 99 var produration=5000;//5秒走完进度条 100 var index=0; 101 var imgwrap=document.getElementById(\'imgwrap\'); 102 var pros=document.getElementsByClassName(\'pro\'); 103 var navs=document.getElementsByClassName(\'nav\'); 104 //moveTo(imgwrap,-600,500,20); 105 106 progress(pros[index],produration,prointerval); 107 108 for(var i=0;i<navs.length;i++){ 109 navs[i].onclick=function(){ 110 index=this.dataset.index;//将大图的index通过data- 获取到 111 moveTo(imgwrap,-index*picwidth,picduration,picinterval); 112 } 113 } 114 115 //进度条函数 116 function progress(elem,duration,interval){ //进度条函数 117 var width=picwidth/picnum;//每个进度条长度 118 var cover=0; 119 var stepLength=width/(duration/interval);//每一步走的长度 120 var tempindex=index;//莫名其妙的index？？向上查找，初始化0然后在循环中获得到点击的值 121 var step=function(){ 122 if(tempindex!==index){clearInterval(intervalId);elem.style.width=http://www.likecs.com/\'0px\';}//点击切换是，index可能会改变，改变后与tempindex不一致，取消原进度条函数 123 if(cover+stepLength<width){ 124 elem.style.width=parseFloat(getStyle(elem,\'width\'))+stepLength+\'px\';//这里之所以用parseFloat是因为步长太小一次不到1，parseInt之后还是零不会再增长了 125 cover+=stepLength; 126 }else{ 127 elem.style.width=http://www.likecs.com/\'0px\'; 128 clearInterval(intervalId); 129 index++;//大图序列+1 130 131 index=index%picnum;//当图片走到最后一张的时候，重置轮播，此时index==0 132 //alert(index); 133 moveTo(imgwrap,-index*picwidth,picduration,picinterval);//进度条执行完后执行图片切换函数 134 } 135 } 136 var intervalId=setInterval(step,interval); 137 } 138 //图片移动函数 139 function moveTo(elem,to,duration,interval){ 140 var currPos=parseInt(getStyle(elem,\'left\'));//获取当前的left值 141 var dis=Math.abs(to-currPos); 142 var symbol=(to-currPos)/dis;//取正负，控制图片转向（左还是右） 143 144 //alert(symbol); 145 146 var stepLength=dis/(duration/interval); //每走一次的长度（函数执行一次图片移动的长度） 147 var cover=0; 148 var step=function(){ 149 if(cover+stepLength<dis){ 150 elem.style.left=parseFloat(getStyle(elem,\'left\'))+stepLength*symbol+\'px\'; 151 cover+=stepLength; 152 }else{ 153 elem.style.left=to+\'px\'; 154 clearInterval(intervalId); 155 progress(pros[index],produration,prointerval);//图片切换函数执行完后执行进度条函数 156 } 157 } 158 var intervalId=setInterval(step,interval); 159 } 160 161 //获得元素的样式 162 function getStyle(elem,cssname){ 163 if(window.getComputedStyle){ 164 165 return window.getComputedStyle(elem)[cssname]; 166 }else{ 167 return elem.currentStyle[cssname]; 168 } 169 } 170 171 } 172 //函数主要分为三个部分，一个负责下面进度条，一个负责上面的大图动，另一个负责获取样式。 173 </script> 174 </body> 175 </html>