2017-05-17 js動態生成輪播圖小圓點
阿新 • • 發佈：2017-05-18
輪播圖 鼠標 borde images author eight 復習 innerhtml pad
從今天開始，把自己做的筆記轉移到博客園：
今晚復習了一下動態創建輪播圖小圓點做了一下小的筆記：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>2017-05-17 js動態生成輪播圖小圓點</title> 6 <!-- author：ishou Mr丶Zhu --> 7 <style> 8 /* 清除網頁空白間隙 */ 9 *{ 10 margin: 0; 11 padding: 0; 12 font-family: "微軟雅黑"; 13 } 14 15 /* 清除ul、ol的小圓點 */ 16 ul, ol { 17 list-style: none; 18 } 19 20 /* 設置輪播圖大盒子屬性 */ 21 .box { 22 width: 734px; /* 設置大盒子寬高 */ 23 height: 454px; 24 margin: 100px auto; /* 居中，距離頂部100px */ 25 overflow: hidden; /* 超過寬度的盒子 隱藏*/ 26 position: relative; /* 子絕父相 子盒子用到了絕對定位 */ 27 } 28 29 /* 設置小圓點父盒子屬性 */ 30 .circle { 31 position: absolute; /* 設置盒子為絕對定位 */ 32 left: 50%; /* 設置盒子距離父盒子左邊50%的像素 */ 33 margin-left:-79px; /* 設置盒子距離父盒子左移顯示的小圓點總像素的一半 ps：79px = [（18*6 + （6-1）*10）] / 2 */ 34 bottom:10px; /* 設置盒子位置放於父盒子底端10px*/ 35 } 36 37 /* 設置小圓點盒子屬性 */ 38 .circle span{ 39 float: left; /* 設置小圓點左浮動 */ 40 width: 18px; /* 設置小圓點寬高 */ 41 height: 18px; 42 border-radius: 50%; /* 設置小圓點為圓形 */ 43 background-color: #ccc; /* 設置小圓點背景顏色 */ 44 text-align: center; /* 設置小圓點文本居中 */ 45 line-height: 18px; /* 設置小圓點行高為盒子高 剛好文本上下左右居中 */ 46 margin-right: 10px; /* 設置小圓點右空白距離 */ 47 cursor: pointer; /* 設置小圓點可以鼠標點擊 */ 48 } 49 50 /* 設置選中的小圓點盒子屬性 */ 51 .circle .current { 52 background-color: red; /* 設置選中的小圓點盒子 */ 53 } 54 55 </style> 56 <script> 57 window.onload = function(){ 58 // 利用js動態創建小圓點 59 var box = document.getElementById("box_"); // 1.獲取輪播圖大盒子 60 var circle = document.createElement("div"); // 2.創建一個盒子用來存放小圓點 61 // circle.className = "circle"; // 更改的類名,不常用，常用的下面的3 62 circle.setAttribute("class","circle"); // 3.為存放小圓點的盒子添加一個類名 63 box.appendChild(circle); // 4.輪播圖大盒子添加存放小圓點的盒子 64 var lists = document.getElementById("slider_").getElementsByTagName("li").length; // 5.獲取slider標簽所有的li標簽 65 // alert(lists); // 6.獲取ul標簽孩子(li)數量 66 for(var i = 0; i < lists; i++){ 67 var span = document.createElement("span"); // 7.創建span小盒子 68 span.innerHTML = i+1; // 8.為小圓點添加文本 69 circle.appendChild(span); // 9.添加小圓點到circle盒子 70 } 71 var current = circle.children[0].setAttribute("class","current"); // 10.修改當前選中的小圓點 72 } 73 74 </script> 75 </head> 76 <body> 77 <!--包圍京東輪播圖的大盒子--> 78 <div class="box" id="box_"> 79 <!--存放輪播圖圖片的盒子--> 80 <div class="slider" id="slider_"> 81 <ul> 82 <li><img src="../images/11.jpg" alt=""></li> <!--輪播圖圖片路徑--> 83 <li><img src="../images/22.jpg" alt=""></li> 84 <li><img src="../images/33.jpg" alt=""></li> 85 <li><img src="../images/44.jpg" alt=""></li> 86 <li><img src="../images/55.jpg" alt=""></li> 87 <li><img src="../images/66.jpg" alt=""></li> 88 </ul> 89 </div> 90 </div> 91 </body> 92 </html>
2017-05-17 js動態生成輪播圖小圓點