Html
    Css
    Js

    
                        
* {
	margin:0px;
	padding:0px;
}
#picList {
	width:750px;
	height:560px;
	margin:180px auto;
}
img {
	width:230px;
	height:159px;
	padding:4px;
}
body {
	background:url("images/bg.jpg") no-repeat;
	background-size:bottom right;
	overflow:hidden;
}
#picList span {
	background-[]color:white;
	width:239px;
	height:169px;
	display:block;
	float:left;
	margin:5px;
	box-shadow:0px 0px 20px #fff;
}
#pan {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	display:none;
}
#showImage {
	position:absolute;
	left:50%;
	top:218px;
	z-index:10;
	box-shadow:0px 0px 20px #fff;
	margin-left:-329px;
}
#showImage span {
	width:658px;
	height:458px;
	position:absolute;
	background:#fff;
}
#showImage img {
	width:650px;
	height:450px;
	position:absolute;
}
#show {
	display:none;
}
#next {
	position:absolute;
	width:50px;
	height:80px;
	box-shadow:0px 0px 20px #fff;
	right:110px;
	top:400px;
	border-radius:10px;
	background:rgba(0,0,0,0);
	z-index:20;
	cursor:pointer;
}
#prev {
	position:absolute;
	width:50px;
	height:80px;
	box-shadow:0px 0px 20px #fff;
	left:100px;
	top:400px;
	border-radius:10px;
	background:rgba(0,0,0,0);
	z-index:20;
	cursor:pointer;
}
#show p {
	font-size:60px;
	font-family:"微软雅黑";
	text-align:center;
	line-height:70px;
	font-weight:bold;
	color:#C5C5C5;
}

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

精美相册(原创)

做个相册送给你们女朋友吧

1
      寒冰 断流水0
      2018/11/13 21:06:47
      因为这个显示页面的问题,还有图片大小的问题,显示不出来效果。
      回复