纯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