引言：最近在看一些輪播圖的制作，各類輪播圖真的是很有創意。咳咳，想起曾經自己做的輪播圖，真是簡單到拿不出手。不多說，直接show code 看看進度條的輪播圖的制作思路，讓我們分析學習這個帶進度條的輪播圖制作：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset='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='main'> 40 <div id='imgwrap'> 41 <img src='img/banner_00.jpg'> 42 <img src='img/banner_01.jpg'> 43 <img src='img/banner_02.jpg'> 44 <img src='img/banner_03.jpg'> 45 <img src='img/banner_04.jpg'> 46 <img src='img/banner_05.jpg'> 47 </div> 48 <div class='navswrap'> 49 <div class='nav nav0' data-index='0'> 50 <div class='navpic'></div> 51 <div class='prowrap'> 52 <div class='pro'></div> 53 </div> 54 </div> 55 56 <div class='nav nav1' data-index='1'> 57 <div class='navpic'></div> 58 <div class='prowrap'> 59 <div class='pro'></div> 60 </div> 61 </div> 62 63 <div class='nav nav2' data-index='2'> 64 <div class='navpic'></div> 65 <div class='prowrap'> 66 <div class='pro'></div> 67 </div> 68 </div> 69 70 <div class='nav nav3' data-index='3'> 71 <div class='navpic'></div> 72 <div class='prowrap'> 73 <div class='pro'></div> 74 </div> 75 </div> 76 77 <div class='nav nav4' data-index='4'> 78 <div class='navpic'></div> 79 <div class='prowrap'> 80 <div class='pro'></div> 81 </div> 82 </div> 83 84 <div class='nav nav5' data-index='5'> 85 <div class='navpic'></div> 86 <div class='prowrap'> 87 <div class='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='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='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>
效果：下面的小圖之下的進度條走完，上面的大圖切換，當點擊下面的小圖時大圖也切換到相應的小圖，同時對用的小圖進度條重置。
您可以： 點擊這里查看效果
git教程：https://pan.baidu.com/s/1-DJIAi7rqV0zprnEJVW7zQ 提取碼：fw2t
一拳超人第一季收藏：https://pan.baidu.com/s/1TL1N2VpfCN06ectJZ5Uimw 提取碼：5cql
20個經典java項目附帶源碼：https://pan.baidu.com/s/1YcOjqRNkscirbJvDXL1VeA 提取碼：ll59
2018年Vue2.X快速入門：https://pan.baidu.com/s/1D5MTeiTpvn01aP-F7iKLYQ 提取碼：4ylv
程序員追女孩12招 https://www.sebigdata.com/carUsb_1201_6_10.html 附帶10G精品教程，鏈接親測有效。（皮了下，找女朋友要緊）
Vue 去哪網項目練習：https://pan.baidu.com/s/1AU0u0Z7aeDRvsT80P03gZQ 提取碼：k1w6
我知女人心：https://www.sebigdata.com/carUsb_1201_5_10.html 知彼知己了解女性的全部教程。