Html
    Css
    Js

    
                        
* {
	padding:0;
	margin:0;
	list-style:none;
}
.wrapper {
	position:relative;
	width:400px;
	height:250px;
	margin:100px auto 0;
	/*border:1px solid black;
	*/
				overflow:hidden;
}
.wrapper .SliderPage {
	position:absolute;
	width:2000px;
	height:250px;
}
.wrapper .SliderPage li {
	float:left;
	width:400px;
	height:250px;
}
.wrapper .SliderPage li img {
	width:100%;
	height:100%;
}
.btn {
	width:40px;
	height:40px;
	background-color:black;
	color:white;
	line-height:40px;
	position:absolute;
	top:50%;
	margin-top:-20px;
	opacity:0.3;
	text-align:center;
	cursor:pointer;
}
.btn.right {
	right:15px;
}
.btn.left {
	left:15px;
}
.wrapper:hover .btn {
	opacity:0.6;
}
.wrapper .SliderInder {
	width:100%;
	text-align:center;
	position:absolute;
	bottom:15px;
}
.wrapper .SliderInder span {
	display:inline-block;
	border-radius:50%;
	background-color:white;
	cursor:pointer;
	width:8px;
	height:8px;
	margin-right:10px;
}
.wrapper .SliderInder .active {
	background-color:red;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

js轮播图(原创)

更新时间:2020-06-04 01:02:54

0