轮播图动态生成小圆点
效果图展示
序号是倒序（个人练习使用） 不需要删除即可
直接上代码
// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
.box{
width: 760px;
height: 454px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.circle{
position: absolute;
left: 50%;
margin-left:-90px;
bottom: 10px;
}
.circle span{
float: left;
width: 18px;
height: 18px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-right:10px;
cursor: pointer;
}
.circle span.current{
background-color: orange;
}
</style>
<script>
window.onload=function(){
var scroll=document.getElementById("scroll");
var ul=document.getElementById("ul");
var circle=document.createElement("div");
circle.setAttribute("class","circle");
scroll.appendChild(circle);
var lis=ul.children;
var god=circle.children;
for(var i=0;i<lis.length;i++){
var span=document.createElement("span");
// circle.appendChild(span);
if(god.length==0){
circle.appendChild(span)
}else{
circle.insertBefore(span,god[0]);
}
span.innerHTML=i+1;
}
god[0].className="current";
}
</script>
</head>
<body>
<div class="box" id="scroll">
<!--<div class="circle">-->
<!--<span class="current">1</span>-->
<!--<span>2</span>-->
<!--<span>3</span>-->
<!--<span>4</span>-->
<!--<span>5</span>-->
<!--<span>6</span>-->
<!--</div>-->
<div class="slider">
<ul class="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>
</body>
</html>