js 基礎篇必看(點擊事件輪播圖的簡單實現)

時間 2019-12-07

原文原文鏈接

輪播圖在之後的應用中仍是比較常見的，不須要多少行代碼就能實現。可是在只掌握了js基礎知識的狀況下，怎麼來用較少的並且邏輯又簡單的方法來實現呢？下面來分析下幾種不一樣的作法：javascript

一、利用位移的方法來實現html

首先，咱們能夠在body中添加一個div而且將寬度設置成百分比（自適應頁面），比例具體是相對誰的百分比的話按需求來作，在這裏很少說。將圖片放入到div 中。java

其次，樣式部分將img標籤所有設置成absolute；以方便定位數組

最後，js部分說說邏輯，定義兩個空數組，第一個數組用來保存初始的顯示在頁面的圖片和等待進入的圖片，第二個數組保存其他的n張圖片，假設這兩個數組分別設置爲：waitToShow=[]; 和 goOut=[]; waitToShow.shift();彈出第一張圖片假如命名爲showFirst，併爲showFirst圖片設置位移和移動時間，執行完成以後showFirst放入goOut尾部：goOut.push(showFirst); 這時waitToShow數組的第0個元素就變成原來的第二張要顯示的圖片，給這個圖片waitToShow[0]設置位移和移動時間，而且將goOut數組的首元素圖片彈出來，在放進waitToShow數組的尾部，保證waitToShow數組永遠是一張顯示的圖片和待顯示的圖片，這樣就經過兩個數組造成了一個循環來完成輪播圖的實現。反向的邏輯是同樣的（因爲邏輯過於複雜這裏不推薦）spa

二、利用層級的高低來使最頂部圖片變化的作法（這個作法沒有位移的動做，可是邏輯卻很是簡便，很實用）code

直接來代碼更直觀點：基本每行都有註釋htm

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>輪播圖 (閃現 自適應)</title>
 6 <style media="screen">
 7 * {
 8 margin: 0; 9 padding: 0; 10 } 11 .wrap { 12 width: 60%; 13 background: red; 14 margin: auto; 15 position: relative; 16 } 17 .wrap img { 18 width: 100%; 19 position: absolute; 20 /*z-index: 10;*/ 21 } 22 input { 23 border: 1px solid lightgray; 24 width: 50px; 25 height: 30px; 26 background: red; 27 border-radius: 5px; 28 font-size: 20px; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="wrap"> 34 <img src="img/01.jpg" alt="" /> 35 <img src="img/02.jpg" alt="" /> 36 <img src="img/03.jpg" alt="" /> 37 <img src="img/04.jpg" alt="" /> 38 </div> 39 <input type="button" id="butLeft" name="name" value="◀︎"> 40 <input type="button" id="butRight" name="name" value="▶︎"> 41 </body> 42 <script type="text/javascript"> 43 // 獲取images元素生成字符串數組，字符串數組不能進行push pop splice 等操做 44 // 因此要將它的值從新存放進一個數組中，後面有定義 45 var images = document.getElementsByTagName('img'); 46 var butLeft = document.getElementById('butLeft'); 47 var butRight = document.getElementById('butRight'); 48 //獲取變量index 用來爲後面設置層級用 49 var index = 1000; 50 // 獲取一個空的數組，用來存放images裏面的字符串元素 51 var imagess = []; 52 53 // for循環用來給imagess數組賦值，而且改變數組中的元素的層級 54 for (var i = 0; i < images.length; i++) { 55 imagess[i] = images[i]; 56 var currentImage = imagess[i]; 57 // 當前圖片的層級的設置，一輪for循環都爲他們設置了初始的zIndex，圖片越靠前，層級設置 58 // 要求越高，因此用的是－i,這樣圖片會按順序從第一張，第二張.....依次向下 59 currentImage.style.zIndex = -i; 60 } 61 62 // 設置計數器count，執行一次點擊事件（向左或者向右）count加1 63 var count = 0; 64 // 向左的點擊事件 65 butLeft.onclick = function() { 66 // 從數組頭部彈出一個圖片元素 67 var showFirst = imagess.shift(); 68 // 給彈出的這個圖片元素設置層級，即 －1000+count， 69 // 讓層級相較其餘元素是最小的，數組頭部彈出的圖片會顯示在最底層 70 showFirst.style.zIndex = - index + count; 71 // 層級改變完成後再將他push進數組的尾部 72 imagess.push(showFirst); 73 // 點擊一次加1，不用考慮具體的值，只須要有點擊事件加 1 74 count++; 75 } 76 // 向右點擊事件 77 butRight.onclick = function() { 78 // 從imagess的尾部彈出一個元素，並賦值給showFirst 79 var showFirst = imagess.pop(); 80 // 設置showFirst的層級爲最大，1000+count ，這樣他會顯示在第一層 81 showFirst.style.zIndex = index + count; 82 // 層級改變以後將他在插入數組imagess的頭部 83 imagess.unshift(showFirst); 84 // 點擊一次加1 85 count++; 86 } 87 </script> 88 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。