body { background-color:#2A2A2A } * { margin:0; padding:0; } li { list-style:none; } .carousel { width:500px; height:300px; overflow:hidden; margin:100px auto; position:relative; } .carousel ul { width:100%; height:100%; } .carousel ul li { position:absolute; } .carousel ul li a img { width:500px; height:300px; } .bullet { position:absolute; font-size:0; bottom:20px; left:50%; margin-left:-42px; } .bullet span { display:inline-block; width:10px; height:10px; background-color:#ffffff; margin-left:15px; border-radius:10px; } .bullet span:first-child { margin-left:0; } .switch { }.switch span { position:absolute; width:50px; height:50px; line-height:50px; text-align:center; background-color:rgba(0,0,0,.1); font-size:20px; color:#ffffff; top:50%; margin-top:-25px; cursor:pointer; font-family:"宋体"; } .switch span:hover { background-color:rgba(0,0,0,.5); } .prev { left:0; } .next { right:0; } .active { background-color:red !important; } /*.image-enter-active { transform:translateX(0); transition:all 1s ease; } .image-leave-active { transform:translateX(-100%); transition:all 1s ease } .image-enter { transform:translateX(100%); } .image-leave { transform:translateX(0); }