代码：
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
描述：可以根据放入的图片大小自动适应大小，轮播图下方会有小缩略图
原文地址：https://www.cnblogs.com/zhongyanzhiyan/p/8352727.html
时间： 2024-10-12 19:46:38