* { padding:0; margin:0; } .box { width:500px; height:400px; margin:20px auto; position:relative; border:1px solid #ccc; } a { display:none; width:500px; height:400px; color:#fff; text-align:center; font:700 100px/400px "simsun"; } ul { position:absolute; bottom:30px; left:50%; list-style:none; margin-left:-55px; } li { float:left; width:18px; height:18px; background-color:black; margin:0 2px; cursor:move; border-radius:9px; color:#fff; text-align:center; line-height:18px; } .arrow span { position:absolute; top:50%; width:38px; height:60px; color:#fff; text-decoration:none; font:700 36px/60px "simsun"; text-align:center; background:rgba(0,0,0,.3); margin-top:-30px; cursor:pointer; } #arrow-l { left:0; } #arrow-r { right:0; } .arrow span:hover { background:rgba(0,0,0,.8); } .current { background-color:red; } .show { display:block; }
仿京东js轮播图