Html
    Css
    Js

    
                        
  body,div,span,header,footer,nav,section,aside,article,ul,ol,dl,dt,dd,li,a,p,h1,h2,h3,h4,h5,h6,i,b,textarea,button,input,select,figure,figcaption,img {
	padding:0;
	margin:0;
	list-style:none;
	font-style:normal;
	text-decoration:none;
	font-weight:normal;
	border:none;
	box-sizing:border-box;
	line-height:1;
	font-family:"楷体",sans-serif;
	-webkit-tap-highlight-color:transparent;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:none;
}
.feature {
	width:100%;
	height:800px;
}
/* 游戏特色 */
    .feature {
	}.feature ul {
	position:relative;
	width:100%;
	height:100%;
}
.feature ul li {
	cursor:pointer;
	position:absolute;
	width:90%;
	height:100%;
	top:0;
	transition:all .5s;
}
.feature ul li:before {
	position:absolute;
	top:0;
	left:0;
	content:"";
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	transition:all .5s;
}
.feature ul li.hover:before {
	background:rgba(0,0,0,0);
}
.feature ul li span {
	position:absolute;
	z-index:2;
	display:block;
	width:100%;
	height:200px;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	opacity:1;
	transition:all .5s;
}
.feature ul li.hover span {
	opacity:0;
}
.feature ul li:nth-child(1) span {
	float:right;
	background:red;
}
.feature ul li:nth-child(2) span {
	/* margin:0 auto;
	*/
        background:blue;
}
.feature ul li:nth-child(3) span {
	float:left;
	background:green;
}
.feature ul li:nth-child(1) {
	background:pink;
	z-index:2;
	right:66.6%;
}
.feature ul li:nth-child(2) {
	background:yellowgreen;
	left:5%;
	z-index:1;
}
.feature ul li:nth-child(3) {
	background:yellow;
	left:66.6%;
	z-index:2;
}
.feature ul li:nth-child(1).hover {
	right:10%;
}
.feature ul li:nth-child(2).hover {
	left:5%;
}
.feature ul li:nth-child(3).hover {
	left:10%;
}
.feature ul li:nth-child(1).active {
	right:95%;
}
.feature ul li:nth-child(2).active {
	left:5%;
}
.feature ul li:nth-child(3).active {
	left:95%;
}

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

手风琴版轮播图(原创)

所用技能包括css3, jquery, 最外层三个小盒子可可根据需要显示或隐藏

0