@charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; font-family:微软雅黑; font-size:24px; } /*框*/ .div01 { width:500px; height:300px; position:absolute; overflow:hidden; } /*照片框*/ .div02 { width:calc(500px*8); height:300px; position:absolute; z-index:5; } .slideimg { display:none; } .cimg { display:block; } /*左右键*/ .abt { display:block; width:30px; height:60px; z-index:9; opacity:0.3; line-height:60px; text-align:center; background-color:gray; color:white; } #lefta { position:absolute; left:0px; top:40%; } #righta { position:absolute; right:0px; top:40%; } .abt:hover { opacity:0.6; cursor:pointer; } /**/ #slideblock { padding:3px 3px; z-index:20; border-radius:8px; position:absolute; left:25%; bottom:20px; width:213px; height:12px; background-color:#eaeaea; opacity:0.8; } #slideblock ol { list-style:none; float:left; width:12px; height:12px; margin-left:13px; border-radius:100%; background-color:white; } #slideblock ol.selected { background-color:red; }
思路:当前图片display为block,其他图片display为none;设计类选择器.cimg { display:block;},设计.slideimg { display:none; },所有图片都要.slideimg,只有的当前要显示的图片有.cimg