Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	list-style:none;
}
.wrap {
	width:800px;
	height:600px;
	margin:200px auto;
	position:relative;
	overflow:hidden;
}
.bigList {
	width:500px;
	height:450px;
	position:relative;
	left:150px;
}
.bigList li {
	position:absolute;
	top:0;
	left:0;
}
.smallList {
	position:absolute;
	bottom:10px;
	height:100px;
	left:150px;
}
.bigList li,.bigList img {
	width:500px;
	height:450px;
}
.smallList li,.smallList img {
	width:100px;
	height:100px;
}
.smallList li {
	float:left;
	margin-right:10px;
}
.bigList:after {
	content:"";
	display:block;
	clear:both;
}
.active {
	border:2px solid red;
}
.next,.pre {
	position:absolute;
	font-size:20px;
	top:250px;
}
.next {
	right:30px;
}

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

jQuery轮播图

0