首先，说说实现的效果：
1、图片的展示与翻页；
2、点击图片放大图片。
实现的效果如下所示：
初始化和第一张
中间的图片
最后一张图片
单击放大显示图片详细与信息
实现的内容很简单，是常规图片的展示方式，下面说说我的实现思路。
1、图片的展示与翻页
a、图片展示
图片展示是通过标签实现的：
<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" style="max-width:90%" style="max-width:90%" src="img/demopage/thumb-1.jpg" alt=""> </a> <a class="thumb-a thumb-a-hide" onclick="showImg(2)"> <img class="thumb-img" style="max-width:90%" style="max-width:90%" src="img/demopage/thumb-2.jpg" alt=""> </a> <a class="thumb-a thumb-a-hide" onclick="showImg(3)"> <img class="thumb-img" style="max-width:90%" style="max-width:90%" src="img/demopage/thumb-3.jpg" alt=""> </a> <div id="next"></div> </div>
</div>翻页是通过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 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')); }<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 style="max-width:90%" style="max-width:90%" src="img/demopage/image-1.jpg" 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>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 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
