* { margin:0; padding:0; } html,body { width:100%; height:100%; } .banner { width:100%; height:400px; background:black; /*overflow:hidden; */ } .group { width:100%; height:400px; overflow:hidden; position:relative; } .group>li { width:100%; height:400px; float:left; list-style:none; display:none; } .group>li:nth-child(1) { background:red; } .group>li:nth-child(2) { background:blue; } .group>li:nth-child(3) { background:green; } .group>li:nth-child(4) { background:yellow; } .group .current { display:block; } .banner>span { width:20px; height:20px; display:inline-block; background:rgba(255,255,255,0.5); color:#fff; } .banner .left { position:absolute; left:0; top:190px; } .banner .right { position:absolute; right:0; top:190px; } .slide { width:480px; height:100px; position:absolute; top:280px; left:540px; background:#1b9c16; list-style:none; display:flex; justify-content:center; } .slide>li { width:100px; height:100px; background:#fff; opacity:0.5; float:left; margin-right:10px; font-size:50px; text-align:center; line-height:100px; } .slide .now { background:red; opacity:0.5; }
里边有注释