<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>照片展示</title>
<link rel="stylesheet" href="text.css" type="text/css"/>
</head>
<body>
<div id="bigPhoto">[外链图片转存失败(img-qjJVWiBP-1562080963227)(https://mp.csdn.net/images/2.jpg)] </div>
<div id="smallPhotos">
<span id="prve"></span>
<ul id="smallPhotosList"></ul>
<span id="next"></span>
</div>
<script src="text.js"></script>
</body>
</html>
ul,li{
list-style:none;
}
#smallPhotos{width:620px;margin: 10px 0;}
#smallPhotosList{margin: 0 auto;width: 580px;float: left;padding: 0;}
#smallPhotosList li{
float: left; /*左浮动*/
margin-left:10px; /*左外边距10像素*/
_margin-left: 8px; /*这是专门针对IE6间隙太大而设置的*/
}
#smallPhotosList img{
border:2px solid #000;
cursor: pointer; /*鼠标样式*/
}
#prve{
background: url("images/2.jpg");
height: 40px;
width: 20px;
display:inline-block; /*让span标签变成块级元素*/
float: left;
cursor: pointer;
}
#next{
background:url("images/3.jpg");
height: 40px;
width: 20px;
display: inline-block;
float: right;
cursor: pointer;
}
eg.data=[
["photo1.jpg","thumb1.jpg"]
,["photo2.jpg","thumb2.jpg"]
,["photo3.jpg","thumb3.jpg"]
];
eg.showNumber=0; //默认显示
eg.groupNumber=1; //当前显示的组
eg.groupSize=; //每组的数量
eg.showThumb=function(group){
var ul=eg.$("smallPhotoList");
ul.innerHTML=''; //每次显示时要清空旧的内容
var start=(group-1)*eg.groupSize; //计算需要的data数据的开始位置
var end=group*eg.groupSize //计算需要的data数据的结束位置
for(var i=start;(i<end&&eg.data.length);i++){
//循环数据,并根据数据生成HTML后插入小图列表里
var li=document.createElement("li");
li.innerHTML='[外链图片转存失败(img-MGCPwx0h-1562080995505)(https://mp.csdn.net/mdeditor/'+eg.data[i][1]+')]';
(function(i){
eg.addListener(li,"click",function(){
//增加click事件监听
eg.showNumber=i;
//记录选中的图表序号,供其他函数调用
eg.showBig();
});
})(i);
ul.appendChild(li); //追加元素
}
};
eg.showBig=function(){
eg.$("bigPhotoSrc").src=eg.$("thumb"+eg.showNumber).src.replace("thumb","photo");
}
eg.init=function() { //根据某个编号显示大图
eg.showThumb(1); //初始化要显示的
eg.addListener(eg.$("next"), "click", function () {
eg.nextThumb();
});
eg.addListener(eg.$("prve"), "click", function () {
eg.prveThumb();
});
eg.addListener(document,"keyup",function (e) {
e = e||event;
if(e.keyCode==37){ //按左方向键时
eg.prvePhoto(); //显示上一张大图
}
if(e.keyCode==39){ //按右方向键时
eg.prvePhoto(); //显示下一张大图
}
});
};
eg.nextPhoto=function(){
if(eg.showNumber%groupSize==(eg.groupSize-1)){
eg.nextThumb()
}else if(eg.showNumber<eg.data.length-1){
eg.showNumber++;
eg.showBig(); //显示大图
}
};
eg.prvePhoto=function(){
if(eg.showNumber==((eg.groupNumber-1)*eg.groupSize)){
eg.prveThumb()
}else if(eg.showNumber>0){
eg.showNumber--;
eg.showBig();
}
};
eg.nextThumb=function(){
if((eg.groupNumber*eg.groupSize)+1<=eg.data.length){
eg.showThumb(eg.groupNumber+1);
eg.groupNumber=eg.groupNumber*eg.groupSize;
eg.showBig();
eg.groupNumber++;
}
};
eg.prveThumb=function(){
if(eg.groupNumber-1>=1){
eg.showThumb(eg.groupNumber-1);
eg.groupNumber--;
eg.showNumber=eg.groupNumber*eg.groupSize-eg.groupSize;
eg.showBig();
}
};