1. [代码] [HTML]代码 !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title图片展示列表-瀑布流/titlestyle#imgList{column-width: 250px;/*多列效果寬度*/-moz-column-width: 250px;-webkit-column-width: 250px;-ms-column-width:250px;-o-
1. [代码][HTML]代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片展示列表-瀑布流</title>
<style>
#imgList{
column-width: 250px;/*多列效果寬度*/
-moz-column-width: 250px;
-webkit-column-width: 250px;
-ms-column-width:250px;
-o-column-width:250px;
column-gap: 5px;
-moz-column-gap: 5px;
-webkit-column-gap: 250px;
-ms-column-gap:250px;
-o-column-gap:250px;
list-style-type: none;
padding: 10px;
}
#imgList li{
margin:5px 0px;
}
#imgList li img{
width:250px;
}
#imgList li img:hover{
opacity: 0.8;
}
#picDisp{
display:none;
position:absolute;
width:100%;
height:100%;
background-color: rgba(0, 0, 0, 0.5);
top:0;
left:0;
}
.content{
display:table;
width:90%;
margin:0 auto;
}
.content > div{
display: table-cell;
padding:0px;
margin: 0px;
position: relative;
}
.leftPanel{
width:9%;
}
.rightPanel{
width:9%;
}
.middlePanel{
width:80%;
}
#picBoard{
display: inline-block;
width:100%;
border-radius: 20px;
}
.close{
width:50px;
height:50px;
background-image: url(img/close-button_v.png);
position:absolute;
left:-25px;
top: 0px;
}
.close:hover{
opacity: 0.9;
}
.previmg{
background: url(img/previmg.png) no-repeat -46px -87px;
display: inline-block;
height: 72px;
width: 40px;
position: absolute;
left: 50px;
top: 300px;
}
.previmg:hover{
background-position:0px -87px;
}
.nextimg{
background: url(img/previmg.png) no-repeat -46px 0px;
display: inline-block;
height: 72px;
width: 40px;
position: absolute;
left: 20px;
top: 300px;
}
.nextimg:hover{
background-position: 0px 0px;
}
</style>
</head>
<body>
<div class="container">
<ul id="imgList">
<li><img src="img/1.jpg" alt="img1" onclick="picDisp(this)"/></li>
<li><img src="img/2.jpg" alt="img2" onclick="picDisp(this)"/></li>
<li><img src="img/3.jpg" alt="img3" onclick="picDisp(this)"/></li>
<li><img src="img/4.jpg" alt="img4" onclick="picDisp(this)"/></li>
<li><img src="img/5.jpg" alt="img5" onclick="picDisp(this)"/></li>
<li><img src="img/6.jpg" alt="img6" onclick="picDisp(this)"/></li>
<li><img src="img/7.jpg" alt="img7" onclick="picDisp(this)"/></li>
<li><img src="img/1.jpg" alt="img1" onclick="picDisp(this)"/></li>
<li><img src="img/2.jpg" alt="img2" onclick="picDisp(this)"/></li>
<li><img src="img/3.jpg" alt="img3" onclick="picDisp(this)"/></li>
<li><img src="img/4.jpg" alt="img4" onclick="picDisp(this)"/></li>
<li><img src="img/5.jpg" alt="img5" onclick="picDisp(this)"/></li>
<li><img src="img/6.jpg" alt="img6" onclick="picDisp(this)"/></li>
<li><img src="img/7.jpg" alt="img7" onclick="picDisp(this)"/></li>
</ul>
<div id="picDisp">
<div class="content">
<div class="leftPanel" >
<span class="previmg" onclick="prevImg()"></span>
</div>
<div class="middlePanel">
<img src="#" alt="pic display large" id="picBoard" onload="picLoaded(this)"/>
</div>
<div class="rightPanel">
<div class = "close" onclick="picDisappear()"></div>
<span class="nextimg" onclick="nextImg()"></span>
</div>
</div>
</div>
</div>
</body>
<script>
var currentActive ;
var ulEle=document.getElementById("imgList");
var PicDisp=document.getElementById("picDisp");
var PicBoard=document.getElementById("picBoard");
//点击显示照片函数
function picDisp(element){
PicDisp.style.display = "block";//显示阴影背景
var imgsrc=element.src;
PicBoard.src=imgsrc;
currentActive = element;
}
//点击关闭函数
function picDisappear(){
// PicDisp.style.paddingTop = "0";
PicDisp.style.display = "none";
}
//上一张
function prevImg(){
// console.log(currentActive);
// console.log(currentActive.parentElement);
var picElePrev = currentActive.parentElement.previousElementSibling;
if(picElePrev){
currentActive=picElePrev.children[0];
//前一个图片的img对象
PicBoard.src=picElePrev.children[0].src;
// PicDisp(picElePrev.children[0]);
}else{
alert("已经是第一张图片了");
}
}
//下一张函数
function nextImg(){
// console.log(currentActive);
// console.log(currentActive.parentElement);
var picEleNext = currentActive.parentElement.nextElementSibling;
if(picEleNext){
currentActive = picEleNext.children[0];
//下一个图片的img对象
PicBoard.src=picEleNext.children[0].src;
// picDisp(picEleNext.children[0]);//调用显示图像函数
}else{
alert("已经是最后一张了");
}
}
</script>
</html>