用JavaScript实现照片展示_前端js cdd实现图片演示-CSDN博客

本文链接：https://blog.csdn.net/qq_43328996/article/details/94497012

<!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();
        }
    };