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

首先，说说实现的效果：

1、图片的展示与翻页；

2、点击图片放大图片。

实现的效果如下所示：

初始化和第一张

中间的图片

最后一张图片

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

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

1、图片的展示与翻页

a、图片展示

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

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

        function updateImage(type){            if(type==="prev"){                if(imgIndex>1){                    imgIndex=imgIndex-1;                }            }            else{                if(imgIndex函数中，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 = $("");            modalBg.addClass("modal-bg");            modalBg.appendTo($('body'));            var modal = $("");            modal.addClass("modal");            modal.css("position","absolute")                 .css("top",(winHeight-height)/2+"px")                 .css("left",(winWidth-width)/2+"px");            var titleTipsBg = $("").addClass("tips-bg");            var titleTips = $("").addClass("tips").html("I am a Chinese.");            var titleClose =  $("").addClass("close");            var title = $("");            title.addClass("title");            title.append(titleTipsBg)                 .append(titleTips)                 .append(titleClose);            titleClose.on("click",function(){                modalBg.hide();                modal.hide();            });            title.appendTo(modal);            var img = $("").attr("width",width)                                 .attr("height",height)                                 .attr("src","img/demopage/image-"+index+".jpg");            var imgDiv = $("").append(img);            imgDiv.appendTo(modal);            modal.appendTo($('body'));        }
  
 上述代码生成Html代码之后如下：  
  
  
					I am a Chinese.						

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

  
上面，涉及到的CSS样式内容如下：
  
  
    
  
 至此，图片集显示就完成了，完整html代码如下：  
  
  
                                                                                        
  
 如有疑问请联系：  
  
QQ：1004740957
  
Emai：niujp08@qq.com