js实现无缝轮播图特效(2)

.container{ width:380px; height:250px; border:1px solid; margin:0 auto; position:relative; overflow: hidden; } .container .imgs{ } .container .imgs .item{ width:380px; height:250px; display:block; float:left; top:0; } .container .circle{ position:absolute; left:0; right:0; margin:0 auto; background:rgba(0,0,0,.3); bottom:8px; border-radius:5px; } .container .circle p{ width:8px; height:8px; background:#fff; border-radius:50%; float:left; margin:2px; cursor:pointer; } .container .circle p.select{ background:#f40; } .container .direction .item{ background:rgba(0,0,0,.4); position:absolute; top:120px; width:20px; height:26px; padding:2px; box-sizing:border-box; display:none; cursor:pointer; } .container .direction .item:hover{ background:rgba(0,0,0,.5); } .container:hover .direction .item{ display:block; } .container .direction .left{ left:0; border-radius:0 15px 15px 0; } .container .direction .right{ right:0; padding-left:6px; border-radius:15px 0 0 15px; }