Html
    Css
    Js

    
                        
@charset "utf-8";
	* {
	margin:0;
	padding:0;
	list-style:none;
}
#wrap {
	width:500px;
	height:333px;
	margin:0 auto;
	position:relative;
	margin-top:100px;
}
#left {
	width:250px;
	height:333px;
	left:0;
	background:red;
	position:absolute;
	z-index:100;
	opacity:0;
	filter:alpha(opacity:0);
}
#right {
	width:250px;
	height:333px;
	right:0;
	background:blue;
	position:absolute;
	z-index:100;
	opacity:0;
	filter:alpha(opacity:0);
}
#wrap img {
	position:absolute;
}
.pos_1 {
	width:280px;
	left:-180px;
	top:-290px;
	z-index:0;
	opacity:0;
	filter:alpha(opacity:0);
	border-radius:20px;
	box-shadow:0px 0px 10px #6F8363;
}
.pos_2 {
	width:280px;
	left:-180px;
	top:68px;
	z-index:1;
	opacity:0.4;
	filter:alpha(opacity:40);
	border-radius:20px;
	box-shadow:0px 0px 10px #6F8363
}
.pos_3 {
	width:380px;
	left:-105px;
	top:35px;
	z-index:2;
	opacity:0.8;
	filter:alpha(opacity:80);
	border-radius:20px;
	box-shadow:0px 0px 10px #6F8363
}
.pos_4 {
	width:500px;
	left:0px;
	top:0px;
	z-index:3;
	opacity:1;
	filter:alpha(opacity:1);
	border-radius:20px;
	box-shadow:0px 0px 10px #6F8363
}
.pos_5 {
	width:380px;
	left:225px;
	top:35px;
	z-index:2;
	opacity:0.8;
	filter:alpha(opacity:80);
	border-radius:20px;
	box-shadow:0px 0px 10px #6F8363
}
.pos_6 {
	width:280px;
	left:400px;
	top:68px;
	z-index:1;
	opacity:0.4;
	filter:alpha(opacity:40);
	border-radius:20px;
	box-shadow:0px 0px 10px #6F8363
}
.pos_7 {
	width:280px;
	left:400px;
	top:-290px;
	z-index:0;
	opacity:0;
	filter:alpha(opacity:0);
	border-radius:20px;
	box-shadow:0px 0px 10px #6F8363
}
#prev {
	left:-75px;
	top:110px;
	z-index:1000;
	cursor:pointer;
}
#prev_txt {
	left:-10px;
	top:110px;
	z-index:1000;
	opacity:0;
	filter:alpha(opacity:0);
	cursor:pointer;
}
#next {
	left:500px;
	top:110px;
	z-index:1000;
	cursor:pointer;
}
#next_txt {
	left:403px;
	top:110px;
	z-index:1000;
	opacity:0;
	filter:alpha(opacity:0);
	cursor:pointer;
}
.leige {
	width:100px;
	height:15px;
	position:absolute;
	bottom:0;
	left:220px;
	z-index:1001;
	padding-top:5px;
}
.leige li {
	width:8px;
	height:8px;
	border-radius:4px;
	background:#fff;
	float:left;
	margin:0 2px;
	cursor:pointer;
}
.leige li:nth-of-type(4) {
	background:green;
}
#footer {
	width:50px;
	height:0px;
	position:absolute;
	left:-432px;
	top:-100px;
	border-radius:20px;
	z-index:10000;
}
#btn {
	width:16px;
	height:16px;
	background:url(../images/closed.gif) no-repeat;
	position:absolute;
	top:-92px;
	right:-425px;
	cursor:pointer;
	display:none;
	z-index:10001;
}

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

JQuery3D叠层轮播图

5
      清水0
      2017/12/24 23:02:44
      四个小图片怎么换呀
          离歌笑0
          2018/9/6 11:35:12
          在html中img标签中更换
          离歌笑0
          2018/9/6 11:36:24
          小图在html标签中,id =prev,那是左右箭头
      回复
      0
      2017/12/23 19:03:00

      那四个小图片是什么

          离歌笑0
          2018/9/6 11:42:36
          左右图标
      回复