#box { width:300px; height:200px; border:1px solid red; margin:0 auto; overflow:hidden; position:relative; } .box { width:1500px; height:200px; position:absolute; left:0; } .box>img { width:300px; height:200px; float:left; } .btn { position:relative; } .btn>span { width:20px; height:20px; float:left; background-color:black; position:absolute; bottom:20px; z-index:99; } .box>span:nth-child(6) { left:20px; } .box>span:nth-child(7) { left:60px; } .box>span:nth-child(8) { left:100px; } .box>span:nth-child(9) { left:140px; }
基于jquery的无缝滚动,原理和原生js差不多.
主要思想当滚动到最后一张图片,瞬间拉回第一张图片.