专栏首页前端知识分享第31天:动态生成节点-京东轮播图创建

第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>

运行结果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第66天:闭包的原理和函数传参

    在程序语言中,所谓闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型...

    半指温柔乐
  • 第58天:简单焦点轮播图

    半指温柔乐
  • 第8天:CSS制作导航栏

    今天主要学习了网页导航栏的制作。注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹...

    半指温柔乐
  • jQuery文档对象模型DOM的实际应用

    DOM 在 JavaScript 课程中我们详细的探讨过,它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。在 JavaScript 中...

    王小婷
  • SuperSlide轮播插件滚动高度或宽度不对的问题解决

    SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等都能实现,兼容包括 IE6 的绝大部分...

    德顺
  • Jq实现简单的选项卡功能

    小白程序猿
  • background-origin默认从padding-box开始的哈

    用户7873631
  • 简单轮播图实现

    用户1749219
  • 实现手淘金刚区类目列表的scroll滑动效果

    (1)实现效果其实很简单,利用better-scroll暴露出的两个特性、translateX、Math对象

    Ewall
  • Sublime Text 使用技巧1

    Sublime Text 是一款功能很强大的编辑器,用起来很爽,界面也很华丽。但我看了一系列的学习视频时候,才发现为我对Sublime Text 2的许多功能还...

    王云峰

扫码关注云+社区

领取腾讯云代金券