* { margin:0; padding:0; list-style:none; } .wrapper { width:1100px; height:600px; margin:0 auto; position:relative; /* border:1px solid black; */ } .wrapper ul { position:relative; height:600px; } .wrapper li { position:absolute; width:262px; height:389px; cursor:pointer; top:50%; left:50%; margin-left:-131px; margin-top:-194px; transition:z-index 0.2s ease-in-out,transform 0.8s ease-in-out 0.3s; } .wrapper li img { width:100%; height:100%; } .btn { display:inline-block; width:80px; height:40px; border:1px solid #000; border-radius:8px; cursor:pointer; line-height:40px; text-align:center; font-weight:bolder; position:absolute; left:45%; } #prev { transform:translateX(-110%); }
这是使用原生的js来做的轮播图,没有使用jq库