* { margin: 0; padding: 0; } .app { width: 100%; /* margin: 50px 0; */ text-align: center; } .app .scroll { position: relative; display: inline-block; width: 100%; height: 100%; } .app .scroll .img { display: none; width: 100%; } .app .scroll .current { display: block; } .scroll .lf { position: absolute; top: 50%; left: 10px; background-image: url('img/arrow.png'); background-position: -83px 0; width: 41px; height: 69px; cursor: pointer; transform: translateY(-50%); } .scroll .lr { position: absolute; top: 50%; right: 10px; background-image: url('img/arrow.png'); background-position: -123px 0; width: 41px; height: 69px; cursor: pointer; transform: translateY(-50%); } .dots { position: absolute; bottom: 15px; right: 20px; width: 160px; } .dots>span { display: inline-block; box-sizing: border-box; width: 11px; height: 11px; border: 3px solid rgba(204, 204, 204, 0.2); border-radius: 15px; cursor: pointer; } .dots>span:not(:last-child) { margin-right: 5px; } /* 小圆点的颜色 */ .dots .square { background: #f46; }