代碼： 自封裝js： 描述：可以根據放入的圖片大小自動適應大小，輪播圖下方會有小縮略圖 ...
代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 *{margin:0 auto;padding: 0;} 8 #LB_div{overflow:hidden;position: relative;} 9 #LB_span{background: #000;display: block;position: absolute;} 10 #LB_span img{float: left;} 11 #LB_zuo,#LB_you:hover{cursor:none;} 12 #LB_ul{list-style: none;display: block;position:absolute;left: 50%; top: 80%;transform: translate(-50%,0);} 13 /*#LB_ul li{float:left;text-align: center;background: gold;border-radius:50%;width: 20px;height: 20px;}*//*這行是小圓點的代碼*/ 14 #LB_ul li{background: transparent;display: inline-block;padding-top:4px;box-sizing:border-box}/*這行是小圖片的代碼*/ 15 #LB_ul li+li{margin-left: 8px;} 16 #LB_ul li:hover{cursor:pointer;background: goldenrod;} 17 #LB_zuo{position: absolute; background: #fff;width: 10%; height: 100%;left:0;opacity: 0;} 18 #LB_you{position: absolute; background: #fff;width: 10%; height: 100%;right:0;opacity: 0;} 19 #LB_left,#LB_right{position: absolute;width: 50px;display: none;} 20 #LB_left,#LB_right:hover{cursor:none;} 21 </style> 22 </head> 23 <body> 24 <div id="LB_div"> 25 <span id="LB_span"> 26 <img src="img/IMG_20160421_205146.jpg"/> 27 <img src="img/IMG_20160421_205146.jpg"/> 28 <img src="img/IMG_20160421_205146.jpg"/> 29 <img src="img/IMG_20160421_205146.jpg"/> 30 <img src="img/IMG_20160421_205146.jpg"/> 31 <img src="img/IMG_20160421_205146.jpg"/> 32 <img src="img/IMG_20160421_205146.jpg"/> 33 <img src="img/IMG_20160421_205146.jpg"/> 34 <img src="img/IMG_20160421_205146.jpg"/> 35 </span> 36 <p id="LB_zuo"></p> 37 <p id="LB_you"></p> 38 <img src="img/Cristal_Intense_072.png" id="LB_left"/> 39 <img src="img/Cristal_Intense_069.png" id="LB_right"/> 40 <ul id="LB_ul"></ul> 41 </div> 42 43 44 45 46 <script type="text/javascript" src="js/Xing_js.js" ></script> 47 <script> 48 var arr=document.querySelectorAll("#LB_span img"); 49 var div=document.querySelector("#LB_div"); 50 var span=document.querySelector("#LB_span"); 51 var zuo=document.querySelector("#LB_zuo"); 52 var you=document.querySelector("#LB_you"); 53 var ul=document.querySelector("#LB_ul"); 54 var jiantou_L=document.querySelector("#LB_left") 55 var jiantou_r=document.querySelector("#LB_right") 56 57 var b=0; 58 59 if(arr.length!=0){//判斷有沒有圖 60 61 62 63 //根據所有圖片長度設置span的長度 64 span.style.width=(arr.length*arr[0].width)+"px"; 65 span.style.left="0px"; 66 span.style.transition="0.5s"; 67 68 69 70 //根據圖片設置div的長寬 71 div.style.width=arr[0].width+"px"; 72 div.style.height=arr[0].height+"px"; 73 74 75 76 // console.log(arr[0].width); 77 //根據圖片數量設置小圓點 78 for(var i=1;i<=arr.length;i++){ 79 var li=document.createElement("li"); 80 81 var img=document.createElement("img");//中間這段是小圖片的代碼 82 img.src=arr[i-1].src; 83 img.setAttribute("style","width: "+parseInt(arr[0].width)*0.1+"px;height"+parseInt(arr[0].height)*0.1+"px;display: inline-block;") 84 li.appendChild(img); 85 86 li.setAttribute("onClick","yuan("+i+")"); 87 ul.appendChild(li); 88 } 89 90 //根據每個li的margin-left來設置ul的寬度 91 var li_arr=document.querySelectorAll("li"); 92 for(var x=0;x<li_arr.length;x++){ 93 b+=parseInt(Xing_getCSS(li_arr[x],"marginLeft")); 94 ul.style.width=parseInt(arr[0].width)*0.1*(arr.length)+b+"px"; 95 } 96 97 98 99 100 //正span移動 101 var i=0; 102 function zheng(){ 103 i++; 104 if(i==arr.length){i=0;}; 105 span.style.left="-"+arr[0].width*i+"px"; 106 biao(i); 107 return i; 108 } 109 110 111 //負span移動 112 function fu(b){ 113 b--; 114 if(b==-1){b=arr.length-1;} 115 span.style.left="-"+arr[0].width*b+"px"; 116 biao(b); 117 return b; 118 } 119 120 121 //小圓點被單擊 122 function yuan(m){ 123 i=m-2; 124 zheng(); 125 } 126 127 //小圓點標亮 128 function biao(d){ 129 var li=ul.childNodes; 130 for(var x=0;x<arr.length;x++){ 131 if(x==d){ 132 li[x].style.background=Xing_RandomColor(); 133 }else{ 134 li[x].style.background="transparent" 135 } 136 } 137 138 139 } 140 141 142 //兩鍵被單擊時 143 you.onclick=function(){ 144 i=zheng(); 145 } 146 zuo.onclick=function(){ 147 i=fu(i); 148 } 149 150 zuo.onmouseover=function(){//左右兩邊的白邊和指針跟隨 151 this.style.opacity="0.4"; 152 this.onmousemove=function(e){ 153 var x=e.layerX; 154 var y=e.layerY; 155 jiantou_L.style.display="block" 156 jiantou_L.style.left=x+5+"px"; 157 jiantou_L.style.top=y+5+"px"; 158 } 159 this.onmouseout=function(){ 160 jiantou_L.style.display="none" 161 this.style.opacity="0"; 162 } 163 } 164 165 you.onmouseover=function(){ 166 this.style.opacity="0.4"; 167 this.onmousemove=function(e){ 168 var x=e.layerX; 169 var y=e.layerY; 170 jiantou_r.style.display="block" 171 jiantou_r.style.left=x+5+"px"; 172 jiantou_r.style.top=y+5+"px"; 173 } 174 this.onmouseout=function(){ 175 jiantou_r.style.display="none" 176 this.style.opacity="0"; 177 } 178 } 179 180 181 //定時器 182 var ding=setInterval("zheng(true)",1000); 183 div.onmouseover=function(){//滑鼠hover停止 184 clearInterval(ding); 185 div.onmouseout=function(){//滑鼠移除 186 ding=setInterval("zheng(true)",1000); 187 } 188 } 189 190 }else{ 191 div.setAttribute("style","border: 1px solid #000;width:300px;height:300px;text-align: center;") 192 div.innerHTML="請放入輪播圖圖片"; 193 } 194 195 196 197 </script> 198 </body> 199 </html>
自封裝js：
1 //獲取id--------------------------------------------------------- 2 function Xing_id(x){ 3 return document.getElementById(x); 4 } 5 6 //刷新頁面--------------------------------------------------------- 7 function Xing_ShuaXinYeMian(){ 8 location.reload(); 9 } 10 11 //選取class，註意返回數組--------------------------------------------------------- 12 function Xing_Class(x){ 13 return document.getElementsByClassName(x); 14 15 } 16 17 18 //封裝隨機顏色------------------------------------------------------- 19 function Xing_RandomColor(){ 20 var sum=""; 21 var shuzu2=['a','b','c','d','e','f','0','1','2','3','4','5','6','7','8','9']; 22 for(var i=1;i<=3;i++){ 23 var int2=parseInt(Math.random()*shuzu2.length); 24 sum+=shuzu2[int2]; 25 } 26 var sum2="#"+sum; 27 sum=""; 28 return sum2; //返回隨機的三位16進位rgb顏色 29 } 30 31 32 //隨機驗證碼--------------------------------------------------------- 33 function Xing_RandomYanZhengMa(n){ //傳入:要返回幾個驗證碼數 34 var str = 'abcdefghijklmnopqrstuvwxyz0123456789'; 35 var tmp = ''; 36 for(var i=0;i<n;i++) 37 tmp += str.charAt(Math.round(Math.random()*str.length)); 38 return tmp; //返回數組 39 } 40 41 42 //封裝選擇質數的選擇器--------------------------------------------------------- 43 function Xing_ZhiShuXuanZe(arguments){//傳入數組，一個或多個 44 var hehe=[]; 45 for(var i=0;i<arguments.length;i++){ 46 if(arguments[i]%2!=0&&arguments[i]%3!=0&&arguments[i]%5!=0&&arguments[i]!=1||arguments[i]==3||arguments[i]==2||arguments[i]==5&&arguments[i]!=0){ 47 hehe.push(arguments[i]); 48 } 49 } 50 return hehe //返回所有質數的數組 51 } 52 53 54 55 //找字元串中倒數第n次出現的字元--------------------------------------------------- 56 function Xing_lastStr(char,y,str,b){//char:要找的字元，y:倒數第幾位,//str:字元串 57 var b=0; 58 if(b==true){ 59 for(var i=str.length-1;i>=0;i--){ 60 if(str[i]==char){ 61 b++; 62 if(b==y){ 63 return i;//返回其下標 64 } 65 } 66 } 67 }else{ 68 for(var i=0;i<str.length;i++){ 69 if(str[i]==char){ 70 b++; 71 if(b==y){ 72 alert("正") 73 return i;//返回其下標 74 } 75 } 76 } 77 } 78 } 79 80 81 82 83 //獲取外部或頭部css樣式---------------------------------------------------- 84 function Xing_getCSS(BQ,gao){//BQ:傳入的標簽 gao:要找的樣式 85 return window.getComputedStyle(BQ)[gao]; //返回該樣式的值 86 } 87 88 89
描述：可以根據放入的圖片大小自動適應大小，輪播圖下方會有小縮略圖
