jQuery相册预览简单实现（附源码）

1、CSS样式

   <style type="text/css">
         html,body,.viewer,.viewer .pic-list,.viewer .pic-list li { width:100%; height:100%; vertical-align:middle;}
         .viewer { position:relative; overflow:hidden;}
         .viewer .bar { display:none; width:100%; height:28px; line-height:18px; background:#000; position:absolute; bottom:; left:; z-index:;}
         .viewer .bar td { padding:5px 10px;}
         .viewer .bar a { color:#fff;}
         .viewer .list { overflow:hidden;}
         .viewer .list li { list-style:none; display:none; overflow:hidden; text-align:center; vertical-align:middle;}
         .viewer .list li img { vertical-align:middle;}
         .viewer a.arrow { display:none; width:52px; height:42px; line-height:42px; text-align:center; overflow:hidden; color:#fff; background:#000; position:absolute; top:50%; margin-top:-30px; z-index:;}
         .viewer a.prev { left:;}
         .viewer a.next { right:;}
     </style>

2、HTML

     <div class="viewer">
         <ul class="list" data="1">
             <li><img src="data:images/temp/banner_1.jpg" alt="图片" /></li>
             <li><img src="data:images/temp/banner_2.jpg" alt="图片" /></li>
             <li><img src="data:images/temp/banner_3.jpg" alt="图片" /></li>
             <li><img src="data:images/temp/banner_4.jpg" alt="图片" /></li>
             <li><img src="data:images/temp/banner_5.jpg" alt="图片" /></li>
         </ul>
         <div class="bar">
             <table width="100%">
                 <tr>
                     <td align="left"><a href="javascript:void(0)" class="bar-prev">上一作品集</a></td>
                     <td align="center"><a href="javascript:void(0)" target="_blank" class="bar-view">查看原图</a></td>
                     <td align="right"><a href="javascript:void(0)" class="bar-next">下一作品集</a></td>
                 </tr>
             </table>
         </div>
         <a href="javascript:Viewer.prev()" class="arrow prev">上一张</a>
         <a href="javascript:Viewer.next()" class="arrow next">下一张</a>
     </div>

3、Javascript

     <script type="text/javascript">
         $(function () {
             Viewer.init();
         });
         var Viewer = {
             wrap: $('.viewer'),
             listWrap: $('.list'),
             list: $('.list li'),
             nums: $('.list li').length,
             barview: $('.bar-view'),
             showbar: true,
             init: function () {//初始化
                 Viewer.show(1);
             },
             show: function (index) {//显示索引项
                 if (Viewer.nums == 0) {
                     Viewer.error();
                 }
                 var e = Viewer.list.first();
                 var p = Viewer.wrap.find('a.prev');
                 var n = Viewer.wrap.find('a.next');
                 if (index < 2) {//显示第一项
                     index = 1;
                     e = Viewer.list.first();
                     p.css({ left: -100 });
                     n.css({ right: 0 });
                 } else if (index >= Viewer.nums) {//显示最后一项
                     index = Viewer.nums;
                     e = Viewer.list.last();
                     p.css({ left: 0 });
                     n.css({ right: -100 });
                 }
                 else {//显示当前项
                     p.css({ left: 0 });
                     n.css({ right: 0 });
                     e = Viewer.list.eq(index - 1);
                 }
                 e.fadeIn().siblings().fadeOut();
                 Viewer.listWrap.attr('data', index);
                 Viewer.barview.attr('href', e.find('img').attr('src'));
                 var m = Viewer.wrap.find('a.arrow');
                 var c = Viewer.wrap.find('.bar');
                 Viewer.wrap.mouseover(function () {
                     m.fadeTo(1, 0.5);
                     if (Viewer.showbar) {
                         c.fadeTo(1, 0.5);
                     }
                 }).mouseleave(function () {
                     m.hide();
                     c.hide();
                 });
             },
             prev: function () {//上一项
                 Viewer.show(parseInt(Viewer.listWrap.attr('data')) - 1);
             },
             next: function () {//下一项
                 Viewer.show(parseInt(Viewer.listWrap.attr('data')) + 1);
             },
             error: function () {//错误提示
                 Viewer.listWrap.remove();
                 Viewer.wrap.append('<h5 style=\"text-align:center\">抱歉，出错啦！</h5>');
                 return false;
             }
         }
     </script>

4、实现效果

下载地址：http://files.cnblogs.com/wyguo/jquery_photo_viewer.zip