【JavaScript】轮播图
代码：
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
描述：可以根据放入的图片大小自动适应大小，轮播图下方会有小缩略图
