图片放大 循环显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.c-container{
}
.c-container ul{
font-size: 0;
}
.c-container ul li{
width: 200px;
height: 190px;
border: 2px solid transparent;
display: inline-block;
cursor: pointer;
}
.c-container ul li img{
width: 100%;
height: 100%;
}
.m-mask-container{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}
.m-mask{
position: fixed;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9);
}
.b-banner{
position: fixed;
width: 500px;
height: 400px;
background-color: #fff;
left: 50%;
top: 50%;
z-index: 3;
margin-left: -250px;
margin-top: -200px;
}
.b-banner img{
width: 100%;
height: 100%;
}
.btn-close{
position: absolute;
top: -16px;
right: -16px;
height: 25px;
width:25px;
line-height: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
text-align: center;
font-size: 16px;
z-index: 5;
color: #fff;
background-color: #cfcfcf;
cursor: pointer;
}
.btn{
text-align: center;
cursor: pointer;
display:block;
background-color: #fff;
}
</style>
</head>
<body>
<div class="c-container">
<ul id="imgBox">
<li><img onclick="bigPicture(this)" src="img/01.jpg" alt=""></li>
<li><img onclick="bigPicture(this)" src="img/2.jpg" alt=""></li>
<li><img onclick="bigPicture(this)" src="img/3.jpg" alt=""></li>
<li><img onclick="bigPicture(this)" src="img/4.jpg" alt=""></li>
<li><img onclick="bigPicture(this)" src="img/5.jpg" alt=""></li>
<li><img onclick="bigPicture(this)" src="img/6.JPG" alt=""></li>
<li><img onclick="bigPicture(this)" src="img/7.JPG" alt=""></li>
</ul>
</div>
<div class="m-mask-container">
<div class="m-mask"></div>
<div class="b-banner">
<a class="btn" onclick="prevBtn()">上一个</a>
<img alt="">
<a class="btn" onclick="nextBtn()">下一个</a>
<i class="btn-close" onclick="closeBtn('.m-mask-container')">X</i>
</div>
</div>
<script src="script/jquery-1.11.3.js"></script>
<script>
var srcArr = [],index;
for (var i = 0;i<$("#imgBox li").length;i++){
srcArr.push($("#imgBox li").eq(i).children().attr("src"));
}
function bigPicture(self) {
var $src = $(self).attr("src");
$(".m-mask-container").show();
$(".b-banner img").attr('src',$src);
index = $(self).parents().index();
}
//关闭
function closeBtn(obj) {
console.log(srcArr[index]);
$(obj).hide();
}
//上一张
function prevBtn() {
index--;
if(index<0){
index = srcArr.length-1;
}
var $s = srcArr[index];
$(".b-banner img").attr('src',$s);
}
//上一张
function nextBtn() {
index++;
if(index>srcArr.length-1){
index = 0;
}
var $s = srcArr[index];
$(".b-banner img").attr('src',$s);
}
</script>
</body>
</html>
