轮播图动态生成小圆点
- 效果图展示
- 直接上代码
效果图展示 序号是倒序（个人练习使用） 不需要删除即可
文章图片
直接上代码
// An highlighted block
- 锐客网
>
*{
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;
}
>
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
2-->
3-->
4-->
5-->
6-->
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
推荐阅读
- JavaWeb学习笔记--day05--day06--XML
- JavaWeb学习笔记--day14--注册案例
- JavaWeb学习笔记--day02+day03+day04--JavaScript
- JavaWeb学习笔记--day13--EL表达式、JSTL、MVC
- JavaWeb学习笔记--day11--自定义标签JSTL标签库，JavaWeb设计模式
- JavaWeb学习笔记--day09--Servlet
- JavaWeb学习笔记--day08