纯js轮播图练习-1
作者：互联网
偶尔练习，看视频自己学着做个简单的纯JS轮播。
简单的纯js轮播图练习-1。
样子就是上面图片那样，先不管好不好看，主要是学会运用和理解轮播的原理
掌握核心的理论知识和技术的操作，其他的都可以在这个基础上做出细微的更改和不断的去完善。
html代码，先写好要的基本元素，比如轮播的图片等。
这里使用的是简单的色块，和两个按钮。
基本上轮播图布为轮播区和操作区：
轮播区：轮播图片或者的色块的区域
操作区：操作轮播图的按钮，可以进行左右轮播
该部分先排除对操作区的布局，主要是轮播区进行了三个方面的布局（核心）
一、显示层：轮播图最外层，显示图片的区域，宽高大小，遮罩其他不需要显示的地方；
二、包裹层：将要显示的图片或者色块，进行包裹定位。
三、展示层：展示层为图片或者色块，
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>lunbo1</title> 6 </head> 7 <body> 8 9 <!-- 10 轮播图的结构基本上有三个层，分别为: 11 12 显示层、包裹层、展示层， 13 --> 14 15 <!--div：显示层--> 16 <div class="wrap" id="wrap"> 17 <!--ul：包裹层--> 18 <ul class="box" id="box" style="left: 0;"> 19 <!--li：展示层--> 20 <li>0</li> 21 <li>1</li> 22 <li>2</li> 23 <li>3</li> 24 <li>4</li> 25 <li>5</li> 26 <li>6</li> 27 <li>7</li> 28 <li>8</li> 29 <li>9</li> 30 </ul> 31 </div> 32 33 <!--按钮--> 34 <div class="butBox"> 35 <button id="butL">向左</button> 36 <button id="butR">向右</button> 37 </div> 38 39 </body> 40 </html>
css：这里的样式做的比较简单，将主要的样式进行排版。
该部分重要的样式在于轮播的显示层，和包裹层及展示层（核心）。
这里需要运用的是各个层的定位和排列（核心）。
1 <style>
2 *{
3 margin: 0;
4 padding: 0;
5 }
6
7 /*
8 * 最外层设置宽高，宽高比例和要显示的色块大小一致便可，
9 * 然后超出隐藏，减其他不显示的隐藏起来。
10 *
11 * */
12 .wrap{
13 width: 100px;
14 height: 100px;
15 overflow: hidden;
16 margin: 0 auto;
17 }
18
19 /*
20 * 先将包裹色块的外层进行relative定位，
21 * 再给一个固定的宽，宽度根据排放的色块的宽和数量来计算，
22 * 我这里排的是10个，每一个色块宽100，10*100=1000px。
23 *
24 * */
25 .box{
26 position: relative;
27 width: 1000px;
28 }
29
30 /*
31 * 设置色块，将所有色块左浮动，排除一排，
32 * 再将色块进行relative定位，好让色块的左上角与外层包裹的左上角对齐。
33 *
34 * */
35 li{
36 float: left;
37 position: relative;
38 list-style: none;
39 width: 100px;
40 height: 100px;
41 background-color: #FF0000;
42 text-align: center;
43 line-height: 100px;
44 color: #FFFFFF;
45 font-size: 32px;
46 font-weight: bold;
47 }
48
49 .butBox{
50 margin: 0 auto;
51 text-align: center;
52 }
53
54 </style>
最后，就是JS部分了。
js基本上要做的可以归类为四个部分：
一，计算出移动的数值更改的原理，（核心）
二：点击事件发生的移动数值更改，
三：自动轮播
四：鼠标移入移除停止、恢复轮播。
1 <script type="text/javascript">
2 //获取显示层的
3 var wrap = document.getElementById("wrap");
4 //获取包裹层
5 var box = document.getElementById("box");
6 //获取显示层的数量
7 var len = document.getElementsByTagName('li').length;
8 //获取包裹层的宽度
9 var w = box.clientWidth;
10 //获取左按钮
11 var butL = document.getElementById("butL");
12 //获取右按钮
13 var butR = document.getElementById("butR");
14 //定义下标位置
15 var index = 0;
16
17 //左轮播方向
18 var lunboL = function(){
19
20 //定义要减去的色块或者图片的宽度，
21 var s = -100;
22
23 //下标加1，默认初始为0，每左移动一个色块，就减1
24 index --;
25
26 //判断下标数字是否等于-1，低于第0张，默认从0开始计算
27 if(index == -1){
28 //变将下标的数字重置为显示层的总数量，这里减1是以为长度是从1开始计算，要与下标统一，就得减去1。
29 index = len-1;
30 };
31
32 //计算出要移动的显示位置。
33 //如果下标等于1，那么就是2*-100，那就是-200，
34
35 s = index*s;
36 //移动显示层的位置，移动的数值位下标*单个色块的长度。
37 box.style.left = s + 'px';
38
39 //打印看一下数值变化
40 console.log(box.style.left,index)
41 }
42
43 //向右移动，原理与向左相同，不同的是移动的数值和下标的计算
44 var lunboR = (function(){
45
46 //与左的移动一样
47 var s = -100;
48
49 //这里的下标是加1，因为是向右，要与左的反过来
50 index ++;
51
52 //判断下标的数值与显示的总数量的数值一致
53 if(index == len){
54
55 //将下标重置为0，从头开始
56 index = 0;
57 };
58
59 //下面的与左移动的一样。
60 s = index*s;
61 box.style.left = s + 'px';
62 console.log(box.style.left,index)
63 })
64
65 //定义轮播的时间，每个三秒，边先左移动一次
66 var lunbos = setInterval(function(){
67 lunboR();
68 },3000);
69
70 //左按钮，点击向左移动
71 butL.onclick = function(){
72 lunboL();
73 }
74
75 //右按钮，点击向右移动
76 butR.onclick = function(){
77 lunboR();
78 }
79
80 //文档加载启动自动轮播
81 window.onload = function(){
82 lunbos;
83 }
84
85 //鼠标移入左按钮，便停止自动轮播
86 butL.onmouseover = function(){
87
88 clearInterval(lunbos);
89 console.log('鼠标移入左按钮')
90 }
91
92 //鼠标移入左按钮，重新开始轮播
93 butL.onmouseout = function(){
94
95 //每3秒一次，与上面的自动轮播时间一致
96 setInterval(function(){
97 lunboR();
98 },3000);
99 console.log('鼠标移出左按钮')
100 }
101
102 //鼠标移入右按钮，便停止自动轮播
103 butR.onmouseover = function(){
104
105 clearInterval(lunbos);
106 console.log('鼠标移入左按钮')
107 }
108
109 //鼠标移入右按钮，重新开始轮播
110 butR.onmouseout = function(){
111
112 //每3秒一次，与上面的自动轮播时间一致
113 setInterval(function(){
114 lunboR();
115 },3000);
116
117 console.log('鼠标移出左按钮')
118 }
119
120 </script>
最后梳理一下，画了一张图总结了一下大概。
这张图里面没有说如何实现自动轮播，主要是为了通过按钮如何实现左右转动。
但是可以看源码，这一份源码里面有自动轮播的js部分。
其实对js定时器有一点基础的话，对自动轮播实现起来是比较简单的，只要将色块向右移动的事件，放在定时器里面。
设置好时间，每过一段时间，自动执行一下，便可以实现自动里面的效果。
全部的代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>lunbo1</title>
6
7 <style>
8 *{
9 margin: 0;
10 padding: 0;
11 }
12
13 /*
14 * 最外层设置宽高，宽高比例和要显示的色块大小一致便可，
15 * 然后超出隐藏，减其他不显示的隐藏起来。
16 *
17 * */
18 .wrap{
19 width: 100px;
20 height: 100px;
21 overflow: hidden;
22 margin: 0 auto;
23 }
24
25 /*
26 * 先将包裹色块的外层进行relative定位，
27 * 再给一个固定的宽，宽度根据排放的色块的宽和数量来计算，
28 * 我这里排的是10个，每一个色块宽100，10*100=1000px。
29 *
30 * */
31 .box{
32 position: relative;
33 width: 1000px;
34 }
35
36 /*
37 * 设置色块，将所有色块左浮动，排除一排，
38 * 再将色块进行relative定位，好让色块的左上角与外层包裹的左上角对齐。
39 *
40 * */
41 li{
42 float: left;
43 position: relative;
44 list-style: none;
45 width: 100px;
46 height: 100px;
47 background-color: #FF0000;
48 text-align: center;
49 line-height: 100px;
50 color: #FFFFFF;
51 font-size: 32px;
52 font-weight: bold;
53 }
54
55 .butBox{
56 margin: 0 auto;
57 text-align: center;
58 }
59
60 </style>
61 </head>
62 <body>
63
64 <!--
65 轮播图的结构基本上有三个层，分别为:
66
67 显示层、包裹层、展示层，
68 -->
69
70 <!--div：显示层-->
71 <div class="wrap" id="wrap">
72 <!--ul：包裹层-->
73 <ul class="box" id="box" style="left: 0;">
74 <!--li：展示层-->
75 <li>0</li>
76 <li>1</li>
77 <li>2</li>
78 <li>3</li>
79 <li>4</li>
80 <li>5</li>
81 <li>6</li>
82 <li>7</li>
83 <li>8</li>
84 <li>9</li>
85 </ul>
86 </div>
87
88 <!--按钮-->
89 <div class="butBox">
90 <button id="butL">向左</button>
91 <button id="butR">向右</button>
92 </div>
93
94 <script type="text/javascript">
95 //获取显示层的
96 var wrap = document.getElementById("wrap");
97 //获取包裹层
98 var box = document.getElementById("box");
99 //获取显示层的数量
100 var len = document.getElementsByTagName('li').length;
101 //获取包裹层的宽度
102 var w = box.clientWidth;
103 //获取左按钮
104 var butL = document.getElementById("butL");
105 //获取右按钮
106 var butR = document.getElementById("butR");
107 //定义下标位置
108 var index = 0;
109
110 //左轮播方向
111 var lunboL = function(){
112
113 //定义要减去的色块或者图片的宽度，
114 var s = -100;
115
116 //下标加1，默认初始为0，每左移动一个色块，就减1
117 index --;
118
119 //判断下标数字是否等于-1，低于第0张，默认从0开始计算
120 if(index == -1){
121 //变将下标的数字重置为显示层的总数量，这里减1是以为长度是从1开始计算，要与下标统一，就得减去1。
122 index = len-1;
123 };
124
125 //计算出要移动的显示位置。
126 //如果下标等于1，那么就是2*-100，那就是-200，
127
128 s = index*s;
129 //移动显示层的位置，移动的数值位下标*单个色块的长度。
130 box.style.left = s + 'px';
131
132 //打印看一下数值变化
133 console.log(box.style.left,index)
134 }
135
136 //向右移动，原理与向左相同，不同的是移动的数值和下标的计算
137 var lunboR = (function(){
138
139 //与左的移动一样
140 var s = -100;
141
142 //这里的下标是加1，因为是向右，要与左的反过来
143 index ++;
144
145 //判断下标的数值与显示的总数量的数值一致
146 if(index == len){
147
148 //将下标重置为0，从头开始
149 index = 0;
150 };
151
152 //下面的与左移动的一样。
153 s = index*s;
154 box.style.left = s + 'px';
155 console.log(box.style.left,index)
156 })
157
158 //定义轮播的时间，每个三秒，边先左移动一次
159 var lunbos = setInterval(function(){
160 lunboR();
161 },3000);
162
163 //左按钮，点击向左移动
164 butL.onclick = function(){
165 lunboL();
166 }
167
168 //右按钮，点击向右移动
169 butR.onclick = function(){
170 lunboR();
171 }
172
173 //文档加载启动自动轮播
174 window.onload = function(){
175 lunbos;
176 }
177
178 //鼠标移入左按钮，便停止自动轮播
179 butL.onmouseover = function(){
180
181 clearInterval(lunbos);
182 console.log('鼠标移入左按钮')
183 }
184
185 //鼠标移入左按钮，重新开始轮播
186 butL.onmouseout = function(){
187
188 //每3秒一次，与上面的自动轮播时间一致
189 setInterval(function(){
190 lunboR();
191 },3000);
192 console.log('鼠标移出左按钮')
193 }
194
195 //鼠标移入右按钮，便停止自动轮播
196 butR.onmouseover = function(){
197
198 clearInterval(lunbos);
199 console.log('鼠标移入左按钮')
200 }
201
202 //鼠标移入右按钮，重新开始轮播
203 butR.onmouseout = function(){
204
205 //每3秒一次，与上面的自动轮播时间一致
206 setInterval(function(){
207 lunboR();
208 },3000);
209
210 console.log('鼠标移出左按钮')
211 }
212
213 </script>
214 </body>
215 </html>
未经允许，禁止转载，抄袭，如需借鉴参考等，请附上该文章连接。
标签：function,index,色块,轮播,练习,js,按钮,var 来源： https://www.cnblogs.com/iFangHuanrui/p/10532988.html