<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/* reset css 样式重置 */
body,p,pre,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,img,div,form,fieldset,select，textarea,input{margin:0;padding:0;}
input,select,textarea{outline:none; border:none; background:#FFF;}
body{ margin: 0 auto; padding:0;font-size:12px;}
table{border-collapse:collapse;}
textarea{ resize:none;overflow:auto;}
a{text-decoration:none; }
li{list-style:none;vertical-align:top;}
img{border:none; vertical-align:top;}
/* 浮动 and 清浮动：类选择器class="clearfix"加在浮动元素的父元素上，来清除该标签元素的浮动对后面标签元素造成的影响 */
.fl{float:left}
.fr{float:right}
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
/* end reset css */
/* 通用样式 */
body{font:normal 12px/20px "Microsoft YaHei"; }
.width960{ width: 960px; margin: 0 auto;}
/* 弹窗 */
.floats{position:absolute;top:0;left:0; width:100%; height:100%; background:#000;
opacity:0.5;filter:alpha(opacity=50);
display: none;
}
.alerts{position:absolute;top:50%;left:50%;margin-left:-402px; margin-top:-302px;width:800px; height:600px;
display: none; background:#fff; border:2px solid yellow; }
/* 页面样式 */
.bgCon{
margin-top: 100px;}
.bgCon .photoAlbum li{
float: left;
width: 300px;height: 224px;padding: 4px;margin: 4px;border:2px solid red
}
img {
width: 100%;
height: 100%;}
.photoContainer ul,.photoContainer div{ position: absolute}
.photoContainer ul{
bottom: 1%;
left: 35%;
width: 50%;
height: 8%;
background: rgba(0,0,255,0.4);
}
.photoContainer li{
width: 10%;
margin-right: 10%;
height: 90%;
border-radius: 50%;
background: rgba(255,255,255,1);
/* 右浮动li顺序-最后一个li在最左边： img顺序图片最后一张在最上面*/
float: right;
}
.photoContainer li.active{
background: rgba(255,0,0,1);
}
.arrow{
top: 50%;
margin-top: -40px;
width: 60px;
height: 80px;
line-height: 80px;
font-size:50px;
background: rgba(125,125,125,0.7);
}
#leftArrow{
left: 0;
}
#rightArrow{
right: 0;
}
.photoContainer .imgBox{width:800px; height:600px;
overflow: hidden; }
.photoContainer .imgBox img{position: absolute }
</style>
<script src="../jquery-3.0.0.js" > </script>
<script>
$( function(){
var srcArr= [
["images/show/0/1.jpg","images/show/0/2.jpg" , "images/show/0/3.jpg","images/show/0/4.jpg" , "images/show/0/5.jpg" ],
["images/show/1/1.jpg","images/show/1/2.jpg" , "images/show/1/3.jpg","images/show/1/4.jpg" , "images/show/1/5.jpg" ],
["images/show/2/1.jpg","images/show/2/2.jpg" , "images/show/2/3.jpg","images/show/2/4.jpg" , "images/show/2/5.jpg" ],
["images/show/3/1.jpg","images/show/3/2.jpg" , "images/show/3/3.jpg","images/show/3/4.jpg" , "images/show/3/5.jpg" ],
["images/show/4/1.jpg","images/show/4/2.jpg" , "images/show/4/3.jpg","images/show/4/4.jpg" , "images/show/4/5.jpg" ],
["images/show/5/1.jpg","images/show/5/2.jpg" , "images/show/5/3.jpg","images/show/5/4.jpg" , "images/show/5/5.jpg" ],
["images/show/6/1.jpg","images/show/6/2.jpg" , "images/show/6/3.jpg","images/show/6/4.jpg" , "images/show/6/5.jpg" ],
["images/show/7/1.jpg","images/show/7/2.jpg" , "images/show/7/3.jpg","images/show/7/4.jpg" , "images/show/7/5.jpg" ],
["images/show/8/1.jpg","images/show/8/2.jpg" , "images/show/8/3.jpg","images/show/8/4.jpg" , "images/show/8/5.jpg" ],
];
//点击某个相册：
$(".photoAlbum li").click(function(ev){
var albumIndex = $(this).index();
$(".floats").eq(0).css("display","block");
$(".alerts").eq(0).css("display","block");
//初始化相册分图片：该相册的对应的图片：注意绝对定位照片重叠，底下是第一张上面是第五张
for( var i =0 ;i< $(".photoContainer img").length ;i++){
$(".photoContainer img").eq(i).attr("src", srcArr[albumIndex][i]);
}
//初始化：小圆点高亮显示
var photoIndex = srcArr[albumIndex].length-1;
$(".photoContainer li").eq(photoIndex).attr("class","active");
$("#leftArrow").click(function(ev){
// 小圆点高亮显示
if(( --photoIndex)<=-1 ){photoIndex= srcArr[albumIndex].length-1 }
$(".photoContainer li").eq(photoIndex).attr("class","active").siblings().attr("class","");
$(".photoContainer img:last").animate({ "left":"-100%","top":"0px" },600,
function(){
$(this).css("left","0").css("top","0");
//剪切：
$(this).prependTo($(".photoContainer .imgBox"));
});
ev.stopPropagation();
});
$("#rightArrow").click(function(ev){
// 小圆点高亮显示
if(( --photoIndex)<=-1 ){photoIndex= srcArr[albumIndex].length-1 }
$(".photoContainer li").eq(photoIndex).attr("class","active").siblings().attr("class","");
$(".photoContainer img:last").animate({ "left":"100%","top":"0px" },600,
function(){
$(this).css("left","0").css("top","0");
//剪切：
$(this).prependTo($(".photoContainer .imgBox"));
});
ev.stopPropagation();
});
ev.stopPropagation();
});
$(document).click(function(){
$(".floats").css("display","none");
$(".alerts").css("display","none");
});
});
</script>
</head>
<body>
<div class="floats"></div>
<div class="alerts photoContainer ">
<div class="imgBox">
<img src="images/show/0/1.jpg" alt="图片1"/>
<img src="images/show/0/2.jpg" alt="图片1"/>
<img src="images/show/0/3.jpg" alt="图片1"/>
<img src="images/show/0/4.jpg" alt="图片1"/>
<img src="images/show/0/5.jpg" alt="图片1"/>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="arrow" id="leftArrow"> < </div>
<div class="arrow" id="rightArrow"> > </div>
</div>
</div>
<div class="width960 bgCon">
<ul class="photoAlbum">
<li> <img src="images/main/1.jpg" alt="相册1"/> </li>
<li> <img src="images/main/2.jpg" alt="相册2"/> </li>
<li> <img src="images/main/3.jpg" alt="相册3"/> </li>
<li> <img src="images/main/4.jpg" alt="相册4"/> </li>
<li> <img src="images/main/5.jpg" alt="相册5"/> </li>
<li> <img src="images/main/6.jpg" alt="相册6"/> </li>
<li> <img src="images/main/7.jpg" alt="相册7"/> </li>
<li> <img src="images/main/8.jpg" alt="相册8"/> </li>
<li> <img src="images/main/9.jpg" alt="相册9"/> </li>
</ul>
</div>
</body>
</html>
