#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差不多.
主要思想当滚动到最后一张图片,瞬间拉回第一张图片.