Html
    Css
    Js

    
                        
* {
	padding:0;
	margin:0;
	border:0;
}
#cont {
	width:800px;
	height:500px;
	position:relative;
	overflow:hidden;
}
#cont ul {
	width:3200px;
	position:relative;
	list-style:none;
}
#cont ul li {
	width:800px;
	height:500px;
	position:relative;
	float:left;
}
#cont ul li img {
	width:100%;
	height:100%;
}
.spanBox {
	width:100px;
	height:20px;
	position:absolute;
	bottom:10px;
	right:0;
}
.spanBox span {
	width:18px;
	text-align:center;
	height:18px;
	line-height:18px;
	margin-left:5px;
	background:coral;
	float:left;
	font-size:15px;
}
#cont .spanBox .active {
	background:aliceblue;
}
.left {
	width:50px;
	height:100px;
	position:absolute;
	top:250px;
	left:0;
	background:cornflowerblue;
}
.right {
	width:50px;
	height:100px;
	position:absolute;
	top:250px;
	right:0;
	background:cornflowerblue;
}

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

jquery轮播图(原创)

0