* { margin:0; padding:0; } ul,ol { list-style:none; } .wrapper { width:500px; height:300px; margin:10px auto; overflow:hidden; position:relative; } ul>li>img { width:100%; height:100%; } ol { position:absolute; right:50%; margin-right:-95px; bottom:10px; width:190px; } ol li { float:left; width:20px; height:20px; margin:0 5px; text-align:center; border-radius:50%; cursor:default; background-color:#abc; } ol li.current { background-color:pink; }
这是一个常见的jQuery焦点图,简单实用