CSS+JS实现图片集展示_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:51 AM

首先，说说实现的效果：

1、图片的展示与翻页；

2、点击图片放大图片。

实现的效果如下所示：

初始化和第一张

中间的图片

最后一张图片

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

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

1、图片的展示与翻页

a、图片展示

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

<div>    <div>        <div id="prev" onclick="updateImage('prev')"></div>        <a id="img1" onclick="showImg(1)">            <img class="thumb-img lazy" src="/static/imghwm/default1.png" data-src="img/demopage/thumb-1.jpg"    style="max-width:90%"  style="max-width:90%" alt="">        </a>        <a class="thumb-a thumb-a-hide" onclick="showImg(2)">            <img class="thumb-img lazy" src="/static/imghwm/default1.png" data-src="img/demopage/thumb-2.jpg"    style="max-width:90%"  style="max-width:90%" alt="">        </a>        <a class="thumb-a thumb-a-hide" onclick="showImg(3)">            <img class="thumb-img lazy" src="/static/imghwm/default1.png" data-src="img/demopage/thumb-3.jpg"    style="max-width:90%"  style="max-width:90%" alt="">        </a>        <div id="next"></div>    </div>
</div>

b、翻页

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

        function updateImage(type){            if(type==="prev"){                if(imgIndex>1){                    imgIndex=imgIndex-1;                }            }            else{                if(imgIndex函数中，imgIndex记录的是当前显示的图片的编号。  <p></p>  <p>①、判断操作类型，并设置操作后的图片的编号。</p>  <p>②、循环添加thumb-a-hide样式，隐藏所有的图片，并移除图片编号为imgIndex的thumb-a-hide样式，显示图片；<br> </p>  <p>③、根据imgIndex判断操作按钮的显示与隐藏。</p>  <p><br> </p>  <p>2、点击显示图片详情与信息</p>  <p>该效果通过函数showImg实现，showImg的具体内容如下：</p>  <p></p>  <pre name="code" class="sycode">        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  src="/static/imghwm/default1.png" data-src="img/demopage/image-1.jpg" class="lazy" alt="CSS+JS实现图片集展示_html/css_WEB-ITnose" >").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="max-width:90%">	<div class="title">		<div class="tips-bg"></div>		<a class="tips">I am a Chinese.</a>		<a class="close"></a>	</div>	<div>		<img  src="/static/imghwm/default1.png" data-src="img/demopage/image-1.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="CSS+JS实现图片集展示_html/css_WEB-ITnose" >	</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代码如下：

        Image List    <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>        var imgIndex = 1;        function showImg(index){            var width=600,height=400;            var winWidth = $(window).width(),winHeight = $(window).height();            var modalBg = $("<div>");            modalBg.addClass("modal-bg");            modalBg.appendTo($('body'));            var modal = $("<div>");            modal.addClass("modal");            modal.css("position","absolute")                 .css("top",(winHeight-height)/2+"px")                 .css("left",(winWidth-width)/2+"px");            var titleTipsBg = $("<div>").addClass("tips-bg");            var titleTips = $("<a>").addClass("tips").html("I am a Chinese.");            var titleClose =  $("<a>").addClass("close");            var title = $("<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  class="thumb-img lazy"  src="/static/imghwm/default1.png"  data-src="img/demopage/thumb-1.jpg"  alt="CSS+JS实现图片集展示_html/css_WEB-ITnose" >").attr("width",width)                                 .attr("height",height)                                 .attr("src","img/demopage/image-"+index+".jpg");            var imgDiv = $("<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>

如有疑问请联系：

QQ：1004740957

Emai：niujp08@qq.com

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

＆gt; gt;的目的是什么元素？Mar 21, 2025 pm 12:34 PM

本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati

＆lt; datalist＆gt;的目的是什么。元素？Mar 21, 2025 pm 12:33 PM

本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159

＆lt; meter＆gt;的目的是什么。元素？Mar 21, 2025 pm 12:35 PM

本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前

视口元标签是什么？为什么对响应式设计很重要？Mar 20, 2025 pm 05:56 PM

本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。

我如何使用html5＆lt; time＆gt; 元素以语义表示日期和时间？Mar 12, 2025 pm 04:05 PM

本文解释了HTML5＆lt; time＆gt;语义日期/时间表示的元素。它强调了DateTime属性对机器可读性（ISO 8601格式）的重要性，并在人类可读文本旁边，增强Accessibilit

如何使用HTML5表单验证属性来验证用户输入？Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。

＆lt; iframe＆gt;的目的是什么。标签？使用时的安全考虑是什么？Mar 20, 2025 pm 06:05 PM

本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。

HTML5中跨浏览器兼容性的最佳实践是什么？Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践，重点是特征检测，进行性增强和测试方法。

See all articles

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。