第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>
运行结果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017-09-13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
