<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态生成小圆点</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
overflow: hidden;
margin: 300px 50%;
position: relative;
border: 1px solid #5EFF5E;
position: relative;
}
img{
width:200px;
height:200px;
display: inline-block;
}
#box .cicle{
position: absolute;
bottom: 10px;
width: 200px;
height: 20px;
line-height: 20px;
text-align: center;
/*border: 1px solid #5EFF5E;*/
}
.cicle span{
border: 1px solid #999999;
border-radius: 100%;
display: inline-block;
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
margin-left: 5px;
font-size: 10px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
var div = document.createElement("div");
div.setAttribute("class","cicle");
box.appendChild(div);
var img = document.getElementsByTagName("img");
for(var i=0; i<img.length; i++){
var span = document.createElement("span");
div.appendChild(span);
span.innerHTML = i+1;
}
}
</script>
</head>
<body>
<div id="box">
<div>
<ul>
<li><img src="../img/1.jpg" alt="" /></li>
<li><img src="../img/2.jpg" alt="" /></li>
<li><img src="../img/3.jpg" alt="" /></li>
<li><img src="../img/4.jpg" alt="" /></li>
<li><img src="../img/5.jpg" alt="" /></li>
</ul>
</div>
</div>
</body>
</html>
效果：
版权声明：本文为qq_37137999原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。