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>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(); } };①. 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')); }<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>
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>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></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>
QQ: 1004740957
Emai ：niujp08@qq.com
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
