* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 490px;
height: 170px;
border: 1px solid #000000;
margin: 100px auto;
padding: 5px;
position: relative;
}
.box .slider{
width: 100%;
height: 100%;
}
.box .slider ul{
width: 100%;
height: 100%;
position: absolute;
left: 5px;
bottom: 0px;
}
.box .slider li{
position: absolute;
top:5px;
left: 490px;
}
.box ol{
text-align: center;
}
.box ol .btn{
width: 20px;
height: 20px;
border-radius:50%;
background: #cccccc;
display: inline-block;
margin: 0 5px;
cursor: pointer;
overflow: hidden;
}
.box ol .btn.cur{
background: red;
}
var obox=document.querySelector(".box");
var slider=obox.querySelector(".slider");
var ali=slider.children[0].querySelectorAll("li");
var oOl=obox.querySelector("ol");
var oli=obox.children[1].children;
init();
a();
//生成圆点
function init() {
for (var i=0;i
{
var oli= document.createElement("li");
//oli.innerHTML= oli.length;添加文本
oOl.insertBefore(oli,oOl.children[0]);
oli.setAttribute("class","btn")
}
oOl.children[0].className="btn cur";
ali[0].style.left= "0px";
}
//轮播
function a() {
oli.οnclick=function(){
for(var i=0;i
{
oli[i].className = "btn";
}
oli[i].className = "btn cur";
}
}