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动态生成轮播图小圆点的主要内容,如果未能解决你的问题,请参考以下文章

解决火车轮播图小圆点跳的问题传统轮播图-三位法

简单轮播图的实现及原理讲解(js)

简单的轮播图小插件

做一个前端网页送给女朋友~轮播图+纪念日

JS原生带小白点轮播图

原生JS面向对象思想封装轮播图组件