Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
/*body,html {
	width:100%;
	height:100%;
}
*/
		#five {
	width:100%;
}
.bg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:500px;
	overflow:hidden;
}
.bg-box-1 {
	background:url('http://www.jq22.com/img/cs/500x300-1.png') no-repeat center/cover;
}
.bg-box-2 {
	background:url('http://www.jq22.com/img/cs/500x300-2.png') no-repeat center/cover;
}
.bg-box-3 {
	background:url('http://www.jq22.com/img/cs/500x300-3.png') no-repeat center/cover;
}
.bg-box-4 {
	background:url('http://www.jq22.com/img/cs/500x300-4.png') no-repeat center/cover;
}
#wrap {
	position:absolute;
	overflow:hidden;
	top:250;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	width:1000px;
	height:400px;
}
#wrap > ul {
	width:120%;
	list-style:none;
}
#wrap > ul > li {
	float:left;
	width:100px;
	height:400px;
	cursor:pointer;
}
#wrap > ul > li:nth-child(1) {
	background:url('http://www.jq22.com/img/cs/500x300-5.png') no-repeat center/cover;
}
#wrap > ul > li:nth-child(2) {
	background:url('http://www.jq22.com/img/cs/500x300-6.png') no-repeat center/cover;
}
#wrap > ul > li:nth-child(3) {
	background:url('http://www.jq22.com/img/cs/500x300-7.png') no-repeat center/cover;
}
#wrap > ul > li:nth-child(4) {
	background:url('http://www.jq22.com/img/cs/500x300-8.png') no-repeat center/cover;
	width:700px;
}
#wrap > ul > li > .text {
	width:100px;
	height:100%;
	background:#000;
	opacity:.5;
}
#wrap > ul > li > .text p {
	padding:20px 40px;
	font-family:'Microsoft yahei';
	color:#fff;
}

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

jQuery手风琴切换图片

更新时间:2019-12-31 00:56:37

0