CSS JS realizes picture collection display_html/css_WEB-ITnose

First of all, let’s talk about the effect achieved:

1. Picture display and page turning;

2. Click on the picture to enlarge the picture.

The effect achieved is as follows:

Initialization and first picture

Middle image

Last image

Click to enlarge to see image details The content implemented with information

is very simple, it is a regular picture display method. Let’s talk about my implementation ideas.

1. Picture display and page turning

a. Picture display

Picture display is achieved through the tag:

<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. Page turning

Page turning is implemented through the updateImage function. The passed parameter is type. It determines the "previous" or "next" during the operation. updateImage The function is as follows:

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

In the function, imgIndex records the number of the currently displayed image.

①. Determine the operation type and set the number of the image after the operation.

②, add the thumb-a-hide style in a loop, hide all pictures, and remove the thumb-a-hide style with the picture number imgIndex, display the picture;

③ , Determine the display and hiding of the operation button based on imgIndex.

2. Click to display image details and information

This effect is achieved through the function showImg. The specific content of showImg is as follows:

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

The above code generates the Html code as follows:

<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>

In fact, a modal layer is created to display the enlarged image.

Above, the CSS styles involved are as follows:

    <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>

At this point, the picture collection display is completed The complete html code is as follows:

            <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 = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;);            modalBg.addClass(&quot;modal-bg&quot;);            modalBg.appendTo($('body'));            var modal = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;);            modal.addClass(&quot;modal&quot;);            modal.css(&quot;position&quot;,&quot;absolute&quot;)                 .css(&quot;top&quot;,(winHeight-height)/2+&quot;px&quot;)                 .css(&quot;left&quot;,(winWidth-width)/2+&quot;px&quot;);            var titleTipsBg = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;tips-bg&quot;);            var titleTips = $(&quot;&lt;a&gt;&lt;/a&gt;&quot;).addClass(&quot;tips&quot;).html(&quot;I am a Chinese.&quot;);            var titleClose =  $(&quot;&lt;a&gt;&lt;/a&gt;&quot;).addClass(&quot;close&quot;);            var title = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;);            title.addClass(&quot;title&quot;);            title.append(titleTipsBg)                 .append(titleTips)                 .append(titleClose);            titleClose.on(&quot;click&quot;,function(){                modalBg.hide();                modal.hide();            });            title.appendTo(modal);            var img = $(&quot;&lt;img&gt;&quot;).attr(&quot;width&quot;,width)                                 .attr(&quot;height&quot;,height)                                 .attr(&quot;src&quot;,&quot;img/demopage/image-&quot;+index+&quot;.jpg&quot;);            var imgDiv = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).append(img);            imgDiv.appendTo(modal);            modal.appendTo($('body'));        }        function updateImage(type){            if(type===&quot;prev&quot;){                if(imgIndex&gt;1){                    imgIndex=imgIndex-1;                }            }            else{                if(imgIndex&lt;3){                    imgIndex=imgIndex+1;                }            }            for(var i=0;i&lt;3;i++){                $(&quot;#img&quot;+(i+1)).addClass(&quot;thumb-a-hide&quot;);            }            $(&quot;#img&quot;+imgIndex).removeClass(&quot;thumb-a-hide&quot;);            if(imgIndex===3){                $(&quot;#next&quot;).hide();            }            else{                $(&quot;#next&quot;).show();            }            if(imgIndex===1){                $(&quot;#prev&quot;).hide();            }            else{                $(&quot;#prev&quot;).show();            }        };    </script>
    
        
                                                                                            
    

If you have any questions, please contact:

QQ: 1004740957

Emai ：niujp08@qq.com