Html
    Css
    Js

    
                        
#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调用版本:2.1.4
 立即下载

jquery 无缝滚动

基于jquery的无缝滚动,原理和原生js差不多.
主要思想当滚动到最后一张图片,瞬间拉回第一张图片.

0