CSS+JS实现图片集展示

首先,说说实现的效果:

1、图片的展示与翻页;

2、点击图片放大图片。

实现的效果如下所示:

初始化和第一张

中间的图片

最后一张图片

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

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

1、图片的展示与翻页

a、图片展示

图片展示是通过<img />标签实现的:

<div class="container">
    <div class="image-list">
        <div id="prev" onclick="updateImage('prev')"></div>
        <a id="img1" class="thumb-a" onclick="showImg(1)">
            <img class="thumb-img" width="200" height="150" src="img/demopage/thumb-1.jpg" alt="" />
        </a>
        <a  id="img2" class="thumb-a thumb-a-hide" onclick="showImg(2)">
            <img class="thumb-img" width="200" height="150" src="img/demopage/thumb-2.jpg" alt="" />
        </a>
        <a  id="img3" class="thumb-a thumb-a-hide" onclick="showImg(3)">
            <img class="thumb-img" width="200" height="150" src="img/demopage/thumb-3.jpg" alt="" />
        </a>
        <div id="next"  onclick="updateImage('next')"></div>
    </div>
</div>

b、翻页

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

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

函数中,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 = $("<div></div>");
            modalBg.addClass("modal-bg");
            modalBg.appendTo($('body'));
            var modal = $("<div></div>");
            modal.addClass("modal");
            modal.css("position","absolute")
                 .css("top",(winHeight-height)/2+"px")
                 .css("left",(winWidth-width)/2+"px");
            var titleTipsBg = $("<div></div>").addClass("tips-bg");
            var titleTips = $("<a></a>").addClass("tips").html("I am a Chinese.");
            var titleClose =  $("<a></a>").addClass("close");
            var title = $("<div></div>");
            title.addClass("title");
            title.append(titleTipsBg)
                 .append(titleTips)
                 .append(titleClose);
            titleClose.on("click",function(){
                modalBg.hide();
                modal.hide();
            });
            title.appendTo(modal);
            var img = $("<img>").attr("width",width)
                                 .attr("height",height)
                                 .attr("src","img/demopage/image-"+index+".jpg");
            var imgDiv = $("<div></div>").append(img);
            imgDiv.appendTo(modal);
            modal.appendTo($('body'));
        }

上述代码生成Html代码之后如下:

<div class="modal-bg"></div>
<div class="modal" style="position: absolute; top: 270px; left: 540px;">
	<div class="title">
		<div class="tips-bg"></div>
		<a class="tips">I am a Chinese.</a>
		<a class="close"></a>
	</div>
	<div>
		<img width="600" height="400" src="img/demopage/image-1.jpg">
	</div>
</div>

其实是创建了一个模态层来显示放大图片。

上面,涉及到的CSS样式内容如下:

    <style type="text/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
        }
    </style>

至此,图片集显示就完成了,完整html代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Image List</title>
    <style type="text/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
        }
    </style>
    <script src="js/jquery-1.8.3.js"></script>
    <script>
        var imgIndex = 1;
        function showImg(index){
            var width=600,height=400;
            var winWidth = $(window).width(),winHeight = $(window).height();
            var modalBg = $("<div></div>");
            modalBg.addClass("modal-bg");
            modalBg.appendTo($('body'));
            var modal = $("<div></div>");
            modal.addClass("modal");
            modal.css("position","absolute")
                 .css("top",(winHeight-height)/2+"px")
                 .css("left",(winWidth-width)/2+"px");
            var titleTipsBg = $("<div></div>").addClass("tips-bg");
            var titleTips = $("<a></a>").addClass("tips").html("I am a Chinese.");
            var titleClose =  $("<a></a>").addClass("close");
            var title = $("<div></div>");
            title.addClass("title");
            title.append(titleTipsBg)
                 .append(titleTips)
                 .append(titleClose);
            titleClose.on("click",function(){
                modalBg.hide();
                modal.hide();
            });
            title.appendTo(modal);
            var img = $("<img>").attr("width",width)
                                 .attr("height",height)
                                 .attr("src","img/demopage/image-"+index+".jpg");
            var imgDiv = $("<div></div>").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();
            }
        };
    </script>
</head>
<body>
<div class="container">
    <div class="image-list">
        <div id="prev" onclick="updateImage('prev')"></div>
        <a id="img1" class="thumb-a" onclick="showImg(1)">
            <img class="thumb-img" width="200" height="150" src="img/demopage/thumb-1.jpg" alt="" />
        </a>
        <a  id="img2" class="thumb-a thumb-a-hide" onclick="showImg(2)">
            <img class="thumb-img" width="200" height="150" src="img/demopage/thumb-2.jpg" alt="" />
        </a>
        <a  id="img3" class="thumb-a thumb-a-hide" onclick="showImg(3)">
            <img class="thumb-img" width="200" height="150" src="img/demopage/thumb-3.jpg" alt="" />
        </a>
        <div id="next"  onclick="updateImage('next')"></div>
    </div>
</div>
</body>
</html>

如有疑问请联系:

QQ:1004740957

Emai:niujp08@qq.com

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏flutter开发者

[Flutter Widget]ExpansionTile

在前面的文章红我们学习了Chip的用法,使用Chip可以很方便的完成对想要的东西打上想要的标签。在文章的最后让大家实现如下的效果

9842
来自专栏Android机动车

Material Design整理(七)——Palette调色板

Palette的意思是调色板,它的作用是从图像中提取出突出的颜色,这样就可以将提取出来的颜色赋给状态栏、Toolbar、标题栏等,使得整个界面看起来色调统一,U...

963
来自专栏everhad

Android自定义评分控件:RatingStarView

RatingStarView Android自定义的评分控件,类似RatingBar那样的,使用星星图标(full、half、empty)作为rating值的“...

4199
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS(二)文本、标签、特性

当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。

1086
来自专栏听雨堂

从MapX到MapXtreme2004[9]-标注的强调显示

        如果想要将一个选中的图元强调显示,用红色醒目的文字显示的话,我的思路如下:             1、不可能直接改原先的图元,所以必须要在一个...

2155
来自专栏mukekeheart的iOS之旅

iOS学习——Quartz2D学习(1)

本文以问答形式主要讲述Quartz2D的相关内容,参考内容是网上下载的学习视频资料。

842
来自专栏算法+

pixel art之 hqx 算法

在去年的时候,偶然看到hqx算法。 一个高质量的插值放大算法。 与双线性插值等插值算法相比,这个算法放大后对人眼保护相对比较好。 没有双线性插值看起来模糊,固然...

3726
来自专栏吴老师移动开发

Flutter TextStyle参数解析关于学习

2061
来自专栏pangguoming

HTML特殊符号对照表

HTML特殊符号对照表 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α &Alpha...

6336
来自专栏向治洪

android绘制虚线

有的时候我们需要一种虚线效果,比如图片的边框,愤怒的小鸟的飞翔路径,那么怎么绘制这些虚线呢?方法很多,目前我觉得好的有两种: 一、自己创建模式,一个点一个点的绘...

2586

扫码关注云+社区

领取腾讯云代金券