Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	list-style:none;
}
.banner {
	width:500px;
	height:300px;
	border:3px solid red;
	margin:100px auto;
	overflow:hidden;
	position:relative;
}
.banner .img {
	width:3000px;
	position:absolute;
	left:0;
	top:0;
}
.banner .img li {
	float:left;
}
.banner .num {
	width:100%;
	position:absolute;
	bottom:10px;
	left:0;
	text-align:center;
	font-size:0;
}
.banner .num li {
	width:10px;
	height:10px;
	background:#888;
	display:inline-block;
	margin:0 3px;
	border-radius:50%;
	cursor:pointer;
}
.banner .num li.on {
	background:#f60;
}
.banner .btn {
	width:30px;
	height:50px;
	background:rgba(0,0,0,0.5);
	position:absolute;
	top:50%;
	margin-top:-25px;
	color:#fff;
	font-size:40px;
	text-align:center;
	line-height:50px;
	cursor:pointer;
	font-family:"宋体";
	display:none;
}
.banner:hover .btn {
	display:block;
}
.banner .btn_l {
	left:0;
}
.banner .btn_r {
	right:0;
}

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

无缝轮播器滑动轮播(原创)

0