/* 轮播图的样式 */ .banner { position: relative; width: 100%; height: 399.38px; overflow: hidden; } .swiper-content { position: relative; height: 100%; width: 2000%; transition: all .7s; } .swiper-content li { position: relative; height: 399.38px; float: left; } .swiper-content li img{ width: 100%; height: 100%; } .swiper-spot { position: absolute; right: 10px; bottom: 10px; } .swiper-spot li{ float: left; width: 10px; height: 10px; border-radius: 100%; background: #999; margin-right: 5px; } .swiper-action { position: absolute; top: 50%; margin-top: -25px; width: 100%; display: none; } .banner:hover .swiper-action { display: inline-block; } .swiper-action .action-left, .swiper-action .action-right{ width: 30px; height: 50px; line-height: 50px; background: #000; text-align: center; color: #fff; cursor: pointer; } .swiper-action .action-left { float: left; } .swiper-action .action-right { float: right; } .active { background: #ff4019 !important; }