【JavaScript】轮播图

2018-06-24 01:25:21来源：未知阅读 ()

代码：

  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