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

首先，说说实现的效果：

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 = $("").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