* { margin:0; padding:0; list-style:none; } .wrap { width:800px; height:600px; margin:200px auto; position:relative; overflow:hidden; } .bigList { width:500px; height:450px; position:relative; left:150px; } .bigList li { position:absolute; top:0; left:0; } .smallList { position:absolute; bottom:10px; height:100px; left:150px; } .bigList li,.bigList img { width:500px; height:450px; } .smallList li,.smallList img { width:100px; height:100px; } .smallList li { float:left; margin-right:10px; } .bigList:after { content:""; display:block; clear:both; } .active { border:2px solid red; } .next,.pre { position:absolute; font-size:20px; top:250px; } .next { right:30px; }