.train_banner { width: 100%; overflow: hidden; position: relative; max-height: 750px } .train_banner .banner_images { width: 1000% } .train_banner .banner_images li { float: left; width: 10% } .train_banner .banner_images li a { display: block; width: 100% } .train_banner .banner_images li a img { display: block; width: 100%; } .train_banner .banner_index { position: absolute; bottom: 20px; width: 100%; text-align: center } .banner_index-frame { display: inline-block } .train_banner .banner_index li { transition: all .3s; margin-right: 15px; float: left; width: 10px; height: 10px; border-radius: 50%; background: #fff } .train_banner .banner_index li:nth-child(4){ display:none } .train_banner .banner_index li.current { transition: all .3s; background-color: #1998da; width: 40px; border-radius: 5px } .train_banner .banner_index li:hover { transform: scale(1.5) } .train_banner .banner_index li.current:hover { transform: scale(1) } .train_banner_left { cursor: pointer; transition: all .5s; position: absolute; left: 0; top: 0; height: 100%; width: 5%; text-align: center; z-index: 5; color: #fff; opacity: .3; background: -webkit-linear-gradient(left,black,rgba(255,255,255,0)); background: -o-linear-gradient(right,black,rgba(255,255,255,0)); background: -moz-linear-gradient(right,black,rgba(255,255,255,0)); background: linear-gradient(to right,black,rgba(255,255,255,0)) } .train_banner_right { cursor: pointer; transition: all .5s; position: absolute; right: 0; top: 0; height: 100%; width: 5%; text-align: center; z-index: 5; color: #fff; opacity: .3; background: -webkit-linear-gradient(left,rgba(255,255,255,0),black); background: -o-linear-gradient(right,rgba(255,255,255,0),black); background: -moz-linear-gradient(right,rgba(255,255,255,0),black); background: linear-gradient(to right,rgba(255,255,255,0),black) } .train_banner_left:hover,.train_banner_right:hover { display: block; opacity: .5 } .train_banner_li { position: absolute; top: 50%; width: 100%; text-align: center }