* { margin:0; padding:0; } ul,ol { list-style:none; } .box { width:640px; height:320px; margin:0px auto; position:relative; } .ul_img { position:absolute; } .ul_img li { width:640px; height:320px; } .ul_img li img { width:100%; height:100%; } .ul_text { position:absolute; right:10px; bottom:10px; } .ul_text li { float:left; width:20px; height:20px; border-radius:20px; background:darkgrey; text-align:center; line-height:20px; font-size:14px; margin-left:5px; cursor:pointer; } .ul_text li.hover { background:darkcyan; color:white; }
这里轮播图用到数组的方式保存图片,通过js动态的添加图片。