#section1 { background-color:#D546D6 } #section2 { background-color:#263FD7 } #section3 { background-color:#20AA7F } #section4 { background-color:#A5B109 } #section5 { background-color:#5F5F5F } html,body { margin:0; padding:0; height:100%; overflow:hidden; } #container,.sections,.section { /*必须,兼容,在浏览器不支持transform属性时,通过改变top/left完成滑动动画*/ position:relative; /*必须,关系到单个page能否全屏显示*/ height:100%; } .section { /*有背景图时必须,关系到背景图能够全屏显示*/ background-color:#000; background-size:cover; background-position:50% 50%; } /*以下样式用来设置slider样式,可自行修改*/ .pages { position:fixed; right:10px; top:50%; list-style:none; } .pages li { width:8px; height:8px; border-radius:50%; background:#fff; margin:15px 0 0 7px; } .pages li.active { margin-left:0; width:14px; height:14px; border:4px solid #FFFFFF; background:none; }