* { margin:0; padding:0; } #banner { width:500px; height:300px; margin:20px auto; /*border:1px solid red; */ position:relative; } #banner .pic { width:100%; height:100%; overflow:hidden; } li { list-style:none; } #banner .pic ul { width:1000%; overflow:hidden; margin-left:-500px; } #banner .pic ul li { float:left; } #banner .tab { width:70px; height:14px; /*background:rgba(255,255,255,0.5); */ position:absolute; left:50%; margin-left:-35px; bottom:10px; border-radius:7px; } #banner .tab ul li { width:10px; height:10px; border-radius:100%; background:#999; float:left; margin:2px 2px; cursor:pointer; } #banner .tab ul li.on { background:#ffffff; } #banner .btn { display:none; } #banner .btn a { display:block; width:40px; height:40px; text-decoration:none; background:rgba(0,0,0,0.3); color:#fff; font-size:26px; font-weight:bold; text-align:center; line-height:40px; position:absolute; top:50%; margin-top:-20px; } #prev { left:5px; } #next { right:5px; } #banner .btn a.on { background:rgba(0,0,0,0.6) } #banner .btn a:hover { background:rgba(0,0,0,0.6) }
用户只需修改这里面的类名就可以使用了,
tabli是小圆点
banner是最外的包裹层
btn是左右按钮包裹层
btna是左右按钮
delaytime 是自动轮播的时间