JS，轮播图（用最基本的流程写的）第一部分

本文链接：https://blog.youkuaiyun.com/sunling112/article/details/53285585

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>w选项卡</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
#scroll{
margin: 100px auto;
width: 730px;
height: 454px;
position: relative;
overflow: hidden;
}
.circle {
position: absolute;
left: 50%;
margin-left:-50px;
bottom:10px;
}

.circle span{
float: left;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: pink;
text-align: center;
line-height: 18px;
margin-right: 10px;
cursor: pointer;
}
.circle span.current{
background-color: #fff;
color: red;
}

</style>
</head>
<body>
<div id="scroll">
<div class="slider">
<ul id="ul">
<li><img src="images/11.jpg" alt=""/></li>
<li><img src="images/22.jpg" alt=""/></li>
<li><img src="images/33.jpg" alt=""/></li>
<li><img src="images/44.jpg" alt=""/></li>
<li><img src="images/55.jpg" alt=""/></li>
<li><img src="images/66.jpg" alt=""/></li>
</ul>
</div>
</div>
<script type="text/javascript">
var scroll = document.getElementById("scroll");

var circle = document.createElement("div");
//circle.className = "circle";
circle.setAttribute("class","circle");//setAttribute设置节点属性，更为常用还可以设置 src，tile（标签自己的属性都可以来设置）
scroll.appendChild(circle);//在scroll里的最后面添加孩子

var ul =document.getElementById("ul");
var lis =ul.children;//得到ul的所有亲孩子，children更为常用
for(var i=0; i<lis.length; i++){
var span = document.createElement("span");
span.innerHTML = i+1;
circle.appendChild(span);
}
var child = circle.children;//得到circle的所有亲孩子，
child[0].setAttribute("class","current");//给他的第一个孩子设置一个属性，，什么属性？ class属性
</script>
</body>
</html>