2017-05-17 js动态生成轮播图小圆点
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2017-05-17 js动态生成轮播图小圆点相关的知识，希望对你有一定的参考价值。
从今天开始，把自己做的笔记转移到博客园：
今晚复习了一下动态创建轮播图小圆点做了一下小的笔记：
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动态生成轮播图小圆点的主要内容，如果未能解决你的问题，请参考以下文章