纯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>
未经允许,禁止转载,抄袭,如需借鉴参考等,请附上该文章连接。