【JavaScript】轮播图

代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
         <title></title>
         <style type="text/css">
             *{margin:0 auto;padding: 0;}
             #LB_div{overflow:hidden;position: relative;}
             #LB_span{background: #000;display: block;position: absolute;}
             #LB_span img{float: left;}
             #LB_zuo,#LB_you:hover{cursor:none;}
             #LB_ul{list-style: none;display: block;position:absolute;left: 50%; top: 80%;transform: translate(-50%,0);}
             /*#LB_ul li{float:left;text-align: center;background: gold;border-radius:50%;width: 20px;height: 20px;}*//*这行是小圆点的代码*/
             #LB_ul li{background: transparent;display: inline-block;padding-top:4px;box-sizing:border-box}/*这行是小图片的代码*/
             #LB_ul li+li{margin-left: 8px;}
             #LB_ul li:hover{cursor:pointer;background: goldenrod;}
             #LB_zuo{position: absolute; background: #fff;width: 10%; height: 100%;left:0;opacity: 0;}
             #LB_you{position: absolute; background: #fff;width: 10%; height: 100%;right:0;opacity: 0;}
             #LB_left,#LB_right{position: absolute;width: 50px;display: none;}
             #LB_left,#LB_right:hover{cursor:none;}
         </style>
     </head>
     <body>
         <div id="LB_div">
             <span id="LB_span">
                 <img src="img/IMG_20160421_205146.jpg"/>
                 <img src="img/IMG_20160421_205146.jpg"/>
                 <img src="img/IMG_20160421_205146.jpg"/>
                 <img src="img/IMG_20160421_205146.jpg"/>
                 <img src="img/IMG_20160421_205146.jpg"/>
                 <img src="img/IMG_20160421_205146.jpg"/>
                 <img src="img/IMG_20160421_205146.jpg"/>
                 <img src="img/IMG_20160421_205146.jpg"/>
                 <img src="img/IMG_20160421_205146.jpg"/>
             </span>
             <p id="LB_zuo"></p>
             <p id="LB_you"></p>
             <img src="img/Cristal_Intense_072.png" id="LB_left"/>
             <img src="img/Cristal_Intense_069.png" id="LB_right"/>
             <ul id="LB_ul"></ul>
         </div>

         <script type="text/javascript" src="js/Xing_js.js" ></script>
         <script>
             var arr=document.querySelectorAll("#LB_span img");
             var div=document.querySelector("#LB_div");
             var span=document.querySelector("#LB_span");
             var zuo=document.querySelector("#LB_zuo");
             var you=document.querySelector("#LB_you");
             var ul=document.querySelector("#LB_ul");
             var jiantou_L=document.querySelector("#LB_left")
             var jiantou_r=document.querySelector("#LB_right")

             var b=0;

             if(arr.length!=0){//判断有没有图

                 //根据所有图片长度设置span的长度
                 span.style.width=(arr.length*arr[0].width)+"px";
                 span.style.left="0px";
                 span.style.transition="0.5s";

                 //根据图片设置div的长宽
                 div.style.width=arr[0].width+"px";
                 div.style.height=arr[0].height+"px";

 //                console.log(arr[0].width);
                 //根据图片数量设置小圆点
                 for(var i=1;i<=arr.length;i++){
                     var li=document.createElement("li");

                     var img=document.createElement("img");//中间这段是小图片的代码
                     img.src=arr[i-1].src;
                     img.setAttribute("style","width: "+parseInt(arr[0].width)*0.1+"px;height"+parseInt(arr[0].height)*0.1+"px;display: inline-block;")
                     li.appendChild(img);

                     li.setAttribute("onClick","yuan("+i+")");
                     ul.appendChild(li);
                 }

                 //根据每个li的margin-left来设置ul的宽度
                 var li_arr=document.querySelectorAll("li");
                 for(var x=0;x<li_arr.length;x++){
                     b+=parseInt(Xing_getCSS(li_arr[x],"marginLeft"));
                     ul.style.width=parseInt(arr[0].width)*0.1*(arr.length)+b+"px";
                 }

                 //正span移动
                 var    i=0;
                 function zheng(){
                     i++;
                     if(i==arr.length){i=0;};
                     span.style.left="-"+arr[0].width*i+"px";
                     biao(i);
                     return i;
                 }

                 //负span移动
                 function fu(b){
                     b--;
                     if(b==-1){b=arr.length-1;}
                     span.style.left="-"+arr[0].width*b+"px";
                     biao(b);
                     return b;
                 }

                 //小圆点被单击
                 function yuan(m){
                     i=m-2;
                     zheng();
                 }

                 //小圆点标亮
                 function biao(d){
                     var li=ul.childNodes;
                     for(var x=0;x<arr.length;x++){
                         if(x==d){
                             li[x].style.background=Xing_RandomColor();
                         }else{
                             li[x].style.background="transparent"
                         }
                     }

                 }

                 //两键被单击时
                 you.onclick=function(){
                     i=zheng();
                 }
                 zuo.onclick=function(){
                     i=fu(i);
                 }

                 zuo.onmouseover=function(){//左右两边的白边和指针跟随
                     this.style.opacity="0.4";
                     this.onmousemove=function(e){
                         var x=e.layerX;
                         var y=e.layerY;
                         jiantou_L.style.display="block"
                         jiantou_L.style.left=x+5+"px";
                         jiantou_L.style.top=y+5+"px";
                     }
                     this.onmouseout=function(){
                         jiantou_L.style.display="none"
                         this.style.opacity="0";
                     }
                 }

                 you.onmouseover=function(){
                     this.style.opacity="0.4";
                     this.onmousemove=function(e){
                         var x=e.layerX;
                         var y=e.layerY;
                         jiantou_r.style.display="block"
                         jiantou_r.style.left=x+5+"px";
                         jiantou_r.style.top=y+5+"px";
                     }
                     this.onmouseout=function(){
                         jiantou_r.style.display="none"
                         this.style.opacity="0";
                     }
                 }

                 //定时器
                 var ding=setInterval("zheng(true)",1000);
                 div.onmouseover=function(){//鼠标hover停止
                     clearInterval(ding);
                     div.onmouseout=function(){//鼠标移除
                         ding=setInterval("zheng(true)",1000);
                     }
                 }

             }else{
                 div.setAttribute("style","border: 1px solid #000;width:300px;height:300px;text-align: center;")
                 div.innerHTML="请放入轮播图图片";
             }

         </script>
     </body>
 </html>

自封装js：

 //获取id---------------------------------------------------------
 function Xing_id(x){
     return document.getElementById(x);
 }

 //刷新页面---------------------------------------------------------
 function Xing_ShuaXinYeMian(){
     location.reload();
 }

 //选取class，注意返回数组---------------------------------------------------------
 function Xing_Class(x){
     return document.getElementsByClassName(x);

 }

 //封装随机颜色-------------------------------------------------------
 function Xing_RandomColor(){
     var sum="";
     var shuzu2=['a','b','c','d','e','f','0','1','2','3','4','5','6','7','8','9'];
     for(var i=1;i<=3;i++){
         var int2=parseInt(Math.random()*shuzu2.length);
         sum+=shuzu2[int2];
     }
     var sum2="#"+sum;
     sum="";
     return sum2;    //返回随机的三位16进制rgb颜色
 }

 //随机验证码---------------------------------------------------------
 function Xing_RandomYanZhengMa(n){        //传入:要返回几个验证码数
  var str = 'abcdefghijklmnopqrstuvwxyz0123456789';
  var tmp = '';
  for(var i=0;i<n;i++)
   tmp += str.charAt(Math.round(Math.random()*str.length));
  return tmp;        //返回数组
 }

 //封装选择质数的选择器---------------------------------------------------------
 function Xing_ZhiShuXuanZe(arguments){//传入数组，一个或多个
     var hehe=[];
     for(var i=0;i<arguments.length;i++){
         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){
             hehe.push(arguments[i]);
         }
     }
     return hehe    //返回所有质数的数组
 }

 //找字符串中倒数第n次出现的字符---------------------------------------------------
 function Xing_lastStr(char,y,str,b){//char:要找的字符，y:倒数第几位,//str:字符串
     var b=0;
     if(b==true){
         for(var i=str.length-1;i>=0;i--){
             if(str[i]==char){
                 b++;
                 if(b==y){
                     return i;//返回其下标
                 }
             }
         }
     }else{
         for(var i=0;i<str.length;i++){
             if(str[i]==char){
                 b++;
                 if(b==y){
                     alert("正")
                     return i;//返回其下标
                 }
             }
         }
     }
 }

 //获取外部或头部css样式----------------------------------------------------
 function Xing_getCSS(BQ,gao){//BQ:传入的标签   gao:要找的样式
     return window.getComputedStyle(BQ)[gao];    //返回该样式的值
 }

描述：可以根据放入的图片大小自动适应大小，轮播图下方会有小缩略图