上一篇文章里，我们实现了图片集的展示，在本文，对上一篇文章的内容作了封装，实现效果上作了一些优化，具体的思路我就不再赘述，下面将我的代码贴出来，以供搭建参考。
1、imglist.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{ margin-left: 40%; position: relative;}#prev{ display: none; width: 45px; height: 50px; background: url(../img/prev.png);}#next{ width: 45px; height: 50px; background: url(../img/next.png);}#prev:hover,#next:hover{ cursor: pointer;}.page-num{ position: absolute; right: 8px; bottom: 15px; border: 2px solid #fff; font-weight: bold; background: #666666; color: #fff; border-radius:15px; text-align: center; padding: 3px; width: 15px; font-size: 13px;}.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}
2、jquery.imglist.js
(function($){ $.fn.imglist = function(options){ var defaults = {}; var options = $.extend(defaults, options); var container=$(this); var imgurls = options.imgurls; var autoplay = options.autoplay; var thumbwidth = options.thumbwidth, thumbheight = options.thumbheight, detailwidth = options.detailwidth,detailheight = options.detailheight; var length,imgindex=1; length = imgurls.length; var play; var imglist = $(
).addclass(image-list).css(width,thumbwidth+px); $(.image-list).live(mouseenter,function(){ play = clearinterval(play); divctrl.show(); }); $(.image-list).live(mouseleave,function(){ play = setinterval(playimg,3000); divctrl.hide(); }); var divpagenum = $(
).addclass(page-num).html(imgindex); divpagenum.appendto(imglist); var divctrl = $(
).css(width,100%).css(height,100%).hide(); var divprev = $(
).attr(id,prev), divnext = $(
).attr(id,next); divprev.css(position,absolute), divnext.css(position,absolute); divprev.css(top,(thumbheight/2-25)+px), divnext.css(top,(thumbheight/2-25)+px); divprev.css(left,-10px), divnext.css(right,-12px); divprev.on(click,function(){ if(imgindex>1){ imgindex=imgindex-1; } for(var i=0;i ); modalbg.addclass(modal-bg); modalbg.appendto($('body')); var modal = $(
); modal.addclass(modal); modal.css(position,absolute) .css(top,(winheight-detailheight)/2+px) .css(left,(winwidth-detailwidth)/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 = $(); img.attr(width,detailwidth) .attr(height,detailheight) .attr(src,img/demopage/image-+imgindex+.jpg); var imgdiv = $(
).append(img); imgdiv.appendto(modal); modal.appendto($('body')); }); } if(autoplay){ play = setinterval(playimg,3000); } function playimg(){ if(imgindex===length){ imgindex=0; } divnext.click(); } }})(jquery);
3、imglist.html
image list

源码下载