<!doctype html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> </head> <style> .box{ width:520px; height:280px; margin:100px auto; overflow:hidden; position:relative; } ul,ol{ list-style:none; padding:0; margin:0; } .box>a{ position:absolute; width:24px; height:36px; top:50%; margin-top:-18px; display:none; } .left{ left:0; } .right{ right:0; } ol{ width:60px; height:20px; position:absolute; lefT:50%; margin-left:-30px; bottom:10px; background:rgba(255,255,255,0.5); border-radius:10px; } ol li{ width:10px; height:10px; background:#fff; border-radius:50%; float:left; margin-top:5px; margin-left:5px; margin-right:5px; } .box:hover>a{ display:block; } </style> <body> <div class="box"> <ul> <li><a href="#"><img src="images/banner1.jpg"></a></li> <li><a href="#"><img src="images/banner2.jpg"></a></li> <li><a href="#"><img src="images/banner3.jpg"></a></li> </ul> <ol> <li></li> <li></li> <li></li> </ol> <a href="javascript:;" class="left"><img src="images/left.png"></a> <a href="javascript:;" class="right"><img src="images/right.png"></a> </div> </body> </html>