CSS+JS实现图片集展示_html/css

来源：芙姬情感网

首先，说说实现的效果：

1、图片的展示与翻页；

2、点击图片放大图片。

实现的效果如下所示：

初始化和第一张

中间的图片

最后一张图片

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

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

1、图片的展示与翻页

a、图片展示

图片展示是通过 b、翻页

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

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

函数中，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 = $("

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

上面，涉及到的CSS样式内容如下：

至此，图片集显示就完成了，完整html代码如下：

  Image List

如有疑问请联系：

QQ：1004740957

Emai：niujp08@qq.com

显示全文

全部频道

CSS+JS实现图片集展示_html/css