第31天：动态生成节点-京东轮播图创建

一、获取节点属性
getAttribute()通过这个方法可以得到某些元素的某些属性
alert(demo.getAttribute("class"));

二、设置节点属性
setAttribute("属性"，"值");
div.setAttribute("class","demo");

三、删除节点属性
removeAttribute("属性");
demo.removeAttribute("title");

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>京东轮播图创建</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .box{
12             width: 730px;
13             height: 454px;
14             margin: 100px auto;
15             overflow: hidden;
16             position: relative;
17 
18         }
19         .circle{
20             position: absolute;
21             left:50%;
22             margin-left: -50px;
23             bottom:10px;
24         }
25         .circle span{
26             float: left;
27             width: 18px;
28             height: 18px;
29             border-radius: 50%;
30             background-color: pink;
31             text-align: center;
32             line-height: 18px;
33             margin-right: 10px;
34             cursor: pointer;
35         }
36         .circle span.current{
37             background-color:blue ;
38             color: #fff;
39         }
40     </style>
41     <script>
42         window.onload=function(){
43             var scroll=document.getElementById("scroll");
44             var circle=document.createElement("div");
45             circle.className="circle";//更改类名
46             scroll.appendChild(circle);
47             var ul=document.getElementById("ul");
48             var lis=ul.children;
49             for(var i=0;i<lis.length;i++){
50                 var newspan=document.createElement("span");
51                 newspan.innerHTML=i+1;
52                 circle.appendChild(newspan);
53             }
54             var child=circle.children;
55             child[0].setAttribute("class","current");
56 
57 
58 
59         }
60     </script>
61 </head>
62 <body>
63     <div class="box" id="scroll">
64         <div class="slider">
65             <ul id="ul">
66                 <li><img src="images/11.jpg" alt=""></li>
67                 <li><img src="images/22.jpg" alt=""></li>
68                 <li><img src="images/33.jpg" alt=""></li>
69                 <li><img src="images/44.jpg" alt=""></li>
70                 <li><img src="images/55.jpg" alt=""></li>
71                 <li><img src="images/66.jpg" alt=""></li>
72             </ul>
73         </div>
74         <div class="circle">
75             <span>1</span>
76             <span>2</span>
77             <span>3</span>
78             <span>4</span>
79             <span>5</span>
80             <span>6</span>
81         </div>
82     </div>
83 </body>
84 </html>

运行结果：