body,html { margin:0; padding:0; } .container { width:400px; padding:20px 0 40px 0; margin:0 auto; text-align:center; position:relative; } .carousel-images { width:300px; height:200px; margin:0 auto; overflow:hidden; } .carousel img { width:100%; height:100%; } .carousel ul { width:1200px; height:200px; list-style:none; margin:0; padding:0; } .carousel li { width:300px; height:200px; float:left; } .press { display:inline-block; position:absolute; top:50%; z-index:101; margin-top:-10px; width:20px; height:20px; border-top:5px solid #d7000f; border-right:5px solid #d7000f; cursor:pointer; } .left { left:5%; transform:rotate(-135deg); } .right { right:5%; transform:rotate(45deg); } .circle { list-style:none; margin:0; padding:0; text-align:center; overflow:hidden; position:absolute; bottom:10px; left:50%; transform:translate(-50%); } .circle li { width:10px; height:10px; border:1px solid lightcoral; float:left; margin-right:10px; border-radius:50%; } .circle-color { background-color:lightcoral; }
代码简单,一看就能懂;
pc端和手机端都可以使用;
目前没有添加自动轮播功能。