CSS+JS实现图片集展示_html/css_WEB-ITnose

首先，说说实现的效果：

1、图片的展示与翻页；

2、点击图片放大图片。

实现的效果如下所示：

立即学习“前端免费学习笔记（深入）”；

初始化和第一张

中间的图片

最后一张图片

单击放大显示图片详细与信息

实现的内容很简单，是常规图片的展示方式，下面说说我的实现思路。

1、图片的展示与翻页

a、图片展示

图片展示是通过标签实现的：

            
                    @@##@@                            @@##@@                            @@##@@

登录后复制b、翻页

翻页是通过updateImage这个函数实现的，传递参数为type，判断操作时“上一张”还是“下一张”，updateImage函数如下：

        function updateImage(type){            if(type==="prev"){                if(imgIndex>1){                    imgIndex=imgIndex-1;                }            }            else{                if(imgIndex函数中，imgIndex记录的是当前显示的图片的编号。  
  ①、判断操作类型，并设置操作后的图片的编号。
  ②、循环添加thumb-a-hide样式，隐藏所有的图片，并移除图片编号为imgIndex的thumb-a-hide样式，显示图片；
  ③、根据imgIndex判断操作按钮的显示与隐藏。
  
  2、点击显示图片详情与信息
  该效果通过函数showImg实现，showImg的具体内容如下：
  
          function showImg(index){            var width=600,height=400;            var winWidth = $(window).width(),winHeight = $(window).height();            var modalBg = $("
");            modalBg.addClass("modal-bg");            modalBg.appendTo($('body'));            var modal = $("
");            modal.addClass("modal");            modal.css("position","absolute")                 .css("top",(winHeight-height)/2+"px")                 .css("left",(winWidth-width)/2+"px");            var titleTipsBg = $("
").addClass("tips-bg");            var titleTips = $("").addClass("tips").html("I am a Chinese.");            var titleClose =  $("").addClass("close");            var title = $("
");            title.addClass("title");            title.append(titleTipsBg)                 .append(titleTips)                 .append(titleClose);            titleClose.on("click",function(){                modalBg.hide();                modal.hide();            });            title.appendTo(modal);            var img = $("@@##@@").attr("width",width)                                 .attr("height",height)                                 .attr("src","img/demopage/image-"+index+".jpg");            var imgDiv = $("
").append(img);            imgDiv.appendTo(modal);            modal.appendTo($('body'));        }
登录后复制  
 上述代码生成Html代码之后如下：  

I am a Chinese.
@@##@@
登录后复制  
 其实是创建了一个模态层来显示放大图片。  

上面，涉及到的CSS样式内容如下：

            html, body, .modal-bg {            height: 100%;            margin: 0;            padding: 0;            font-size: 13px;            font-weight: bold;            color: #fff;        }        .modal-bg{            position: absolute;            left: 0px;            top: 0px;            width: 100%;            background: #48525e;            opacity: 0.4;            z-index: 10;        }        .modal{            position: relative;            z-index: 99;            opacity: 1;            top: 15%;            left: 40%;            width: 600px;            height: 400px;        }        .modal .title .tips-bg{            position: absolute;            bottom: 0px;            left: 0px;            background: #48525e;            width: 100%;            height: 50px;            opacity: 0.8;        }        .modal .title .tips{            position: absolute;            bottom: 13px;            left: 10px;            font-family: "Arial";            font-weight: bold;            font-size: 20px;        }        .modal .title .close{            background: url(img/close.png) no-repeat;            width: 27px;            height: 27px;            position: absolute;            top: 5px;            right: 5px;        }        .modal .title .close:hover{            cursor: pointer;        }        .container{            position: absolute;            top: 200px;            text-align: center;            width: 100%;            z-index: 5;        }        .image-list{            width:300px;            margin-left: 40%;            position: relative;        }        #prev{            display: none;            position: absolute;            top: 55px;            left: 35px;            float: left;            width: 45px;            height: 50px;            background: url(img/prev.png);        }        #next{            position: absolute;            top: 55px;            right: 40px;            width: 45px;            height: 50px;            background: url(img/next.png);        }        #prev:hover,#next:hover{            cursor: pointer;        }        .thumb-a{            display:inline-block;            padding:4px;            margin:0 0.5rem 1rem 0.5rem 1rem;            line-height:0;            -webkit-transition:background-color 0.1s ease-out;            -moz-transition:background-color 0.1s ease-out;            -o-transition:background-color 0.1s ease-out;            transition:background-color 0.1s ease-out;            -webkit-border-radius:6px;            -moz-border-radius:6px;            -ms-border-radius:6px;            -o-border-radius:6px;            border-radius:6px        }        .thumb-a:hover{            background-color:#4ae;            cursor: pointer;        }        .thumb-a-hide{            display: none;        }        .thumb-img{            -webkit-border-radius:5px;            -moz-border-radius:5px;            -ms-border-radius:5px;            -o-border-radius:5px;            border-radius:5px        }    
登录后复制  
 至此，图片集显示就完成了，完整html代码如下：  

    Image List        html, body, .modal-bg {            height: 100%;            margin: 0;            padding: 0;            font-size: 13px;            font-weight: bold;            color: #fff;        }        .modal-bg{            position: absolute;            left: 0px;            top: 0px;            width: 100%;            background: #48525e;            opacity: 0.4;            z-index: 10;        }        .modal{            position: relative;            z-index: 99;            opacity: 1;            top: 15%;            left: 40%;            width: 600px;            height: 400px;        }        .modal .title .tips-bg{            position: absolute;            bottom: 0px;            left: 0px;            background: #48525e;            width: 100%;            height: 50px;            opacity: 0.8;        }        .modal .title .tips{            position: absolute;            bottom: 13px;            left: 10px;            font-family: "Arial";            font-weight: bold;            font-size: 20px;        }        .modal .title .close{            background: url(img/close.png) no-repeat;            width: 27px;            height: 27px;            position: absolute;            top: 5px;            right: 5px;        }        .modal .title .close:hover{            cursor: pointer;        }        .container{            position: absolute;            top: 200px;            text-align: center;            width: 100%;            z-index: 5;        }        .image-list{            width:300px;            margin-left: 40%;            position: relative;        }        #prev{            display: none;            position: absolute;            top: 55px;            left: 35px;            float: left;            width: 45px;            height: 50px;            background: url(img/prev.png);        }        #next{            position: absolute;            top: 55px;            right: 40px;            width: 45px;            height: 50px;            background: url(img/next.png);        }        #prev:hover,#next:hover{            cursor: pointer;        }        .thumb-a{            display:inline-block;            padding:4px;            margin:0 0.5rem 1rem 0.5rem 1rem;            line-height:0;            -webkit-transition:background-color 0.1s ease-out;            -moz-transition:background-color 0.1s ease-out;            -o-transition:background-color 0.1s ease-out;            transition:background-color 0.1s ease-out;            -webkit-border-radius:6px;            -moz-border-radius:6px;            -ms-border-radius:6px;            -o-border-radius:6px;            border-radius:6px        }        .thumb-a:hover{            background-color:#4ae;            cursor: pointer;        }        .thumb-a-hide{            display: none;        }        .thumb-img{            -webkit-border-radius:5px;            -moz-border-radius:5px;            -ms-border-radius:5px;            -o-border-radius:5px;            border-radius:5px        }            var imgIndex = 1;        function showImg(index){            var width=600,height=400;            var winWidth = $(window).width(),winHeight = $(window).height();            var modalBg = $("");            modalBg.addClass("modal-bg");            modalBg.appendTo($('body'));            var modal = $("");            modal.addClass("modal");            modal.css("position","absolute")                 .css("top",(winHeight-height)/2+"px")                 .css("left",(winWidth-width)/2+"px");            var titleTipsBg = $("").addClass("tips-bg");            var titleTips = $("").addClass("tips").html("I am a Chinese.");            var titleClose =  $("").addClass("close");            var title = $("");            title.addClass("title");            title.append(titleTipsBg)                 .append(titleTips)                 .append(titleClose);            titleClose.on("click",function(){                modalBg.hide();                modal.hide();            });            title.appendTo(modal);            var img = $("@@##@@").attr("width",width)                                 .attr("height",height)                                 .attr("src","img/demopage/image-"+index+".jpg");            var imgDiv = $("").append(img);            imgDiv.appendTo(modal);            modal.appendTo($('body'));        }        function updateImage(type){            if(type==="prev"){                if(imgIndex>1){                    imgIndex=imgIndex-1;                }            }            else{                if(imgIndex<3){                    imgIndex=imgIndex+1;                }            }            for(var i=0;i<3;i++){                $("#img"+(i+1)).addClass("thumb-a-hide");            }            $("#img"+imgIndex).removeClass("thumb-a-hide");            if(imgIndex===3){                $("#next").hide();            }            else{                $("#next").show();            }            if(imgIndex===1){                $("#prev").hide();            }            else{                $("#prev").show();            }        };                
                    @@##@@                            @@##@@                            @@##@@                
    
登录后复制  
 如有疑问请联系：  
QQ：1004740957
Emai：niujp08@qq.com

 




 
 



                                                        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3097672.html