Html
    Css
    Js

    
                        
* {
	margin:0;
}
.min {
	width:900px;
	height:400px;
	background-color:#6f0b02;
	margin:0 auto;
	position:relative;
}
.img1 {
	width:48px;
	height:384px;
	background:url("http://www.jq22.com/img/cs/500x300c.png") no-repeat 100%;
	float:left;
	position:absolute;
	top:10px;
	left:402px;
	z-index:2;
}
.img2 {
	width:0;
	height:384px;
	background:url("http://www.jq22.com/img/cs/500x300b.png") no-repeat 100%;
	float:left;
	position:absolute;
	overflow:hidden;
	top:10px;
	left:450px;
	z-index:1;
}
.img3 {
	width:0;
	height:384px;
	float:left;
	background:url("http://www.jq22.com/img/cs/500x300b.png") no-repeat 100%;
	overflow:hidden;
	position:absolute;
	top:10px;
	right:450px;
	z-index:1;
}
.img4 {
	width:48px;
	height:384px;
	background:url("http://www.jq22.com/img/cs/500x300a.png") no-repeat 100%;
	float:left;
	position:absolute;
	top:9px;
	right:402px;
	z-index:2;
}
.cont {
	width:600px;
	position:absolute;
	top:100px;
	left:100px;
	display:none;
	z-index:3;
}
.cont>p {
	line-height:26px;
	font-size:14px;
	font-family:"微软雅黑";
}
.font {
	width:60px;
	height:30px;
	text-align:center;
	line-height:30px;
	margin:0 auto;
	margin-top:40px;
	background-color:#6f0b02;
	color:white;
	font-size:18px;
	cursor:pointer;
}
.fonts {
	width:60px;
	height:30px;
	text-align:center;
	line-height:30px;
	margin:0 auto;
	margin-top:40px;
	background-color:#6f0b02;
	color:white;
	font-size:18px;
	cursor:pointer;
	display:none;
}

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

jQuery卷轴效果

0