* { margin:0; padding:0; } body { padding:20px; } #wrap { width:600px; height:400px; border:3px solid #000; margin:0 auto; /* padding:20px; */ position:relative; /* 这里是重要点1,位置设定 */ overflow:hidden; } #picture { /* border:2px solid #000; */ position:absolute; /* 这里是重要点2,位置设定 */ width:4200px; height:400px; z-index:1; } #picture img { width:600px; height:400px; /*border:2px solid #000; */ float:left; /* 这里是重要点3,位置设定 */ /* display:none; */ } #buttons { position:absolute; height:10px; width:100px; z-index:2; left:250px; /* background:red; opacity:0.3; */ bottom:20px; } #buttons span { width:10px; height:10px; border-radius:6px; border:2px solid #fff; float:left; margin-left:5px; cursor:pointer; /* 这个地方以后注意兼容性 */ } #buttons .on { background:orange; } .arrow { display:none; width:50px; height:50px; position:absolute; background-color:rgba(0,0,0,.3); color:#fff; z-index:2; top:170px; } .arrow:hover { background-color:rgba(0,0,0,.7); } #wrap:hover .arrow { display:block; } #prev { left:10px; } #next { right:10px; }
简单的轮播图设计,代码简单 容易移植