偶爾練習，看視頻自己學着做個簡單的純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>
未經允許，禁止轉載，抄襲，如需借鑒參考等，請附上該文章連接。