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

1、CSS样式  

 1   <style type="text/css">
 2         html,body,.viewer,.viewer .pic-list,.viewer .pic-list li { width:100%; height:100%; vertical-align:middle;}
 3         .viewer { position:relative; overflow:hidden;}
 4         .viewer .bar { display:none; width:100%; height:28px; line-height:18px; background:#000; position:absolute; bottom:0; left:0; z-index:998;}
 5         .viewer .bar td { padding:5px 10px;}
 6         .viewer .bar a { color:#fff;}
 7         .viewer .list { overflow:hidden;} 
 8         .viewer .list li { list-style:none; display:none; overflow:hidden; text-align:center; vertical-align:middle;}
 9         .viewer .list li img { vertical-align:middle;}
10         .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:999;}
11         .viewer a.prev { left:0;}
12         .viewer a.next { right:0;}
13     </style>
View Code

2、HTML    

 1     <div class="viewer">
 2         <ul class="list" data="1">
 3             <li><img src="images/temp/banner_1.jpg" alt="图片" /></li>
 4             <li><img src="images/temp/banner_2.jpg" alt="图片" /></li>
 5             <li><img src="images/temp/banner_3.jpg" alt="图片" /></li>
 6             <li><img src="images/temp/banner_4.jpg" alt="图片" /></li>
 7             <li><img src="images/temp/banner_5.jpg" alt="图片" /></li>
 8         </ul>
 9         <div class="bar">
10             <table width="100%">
11                 <tr>
12                     <td align="left"><a href="javascript:void(0)" class="bar-prev">上一作品集</a></td>
13                     <td align="center"><a href="javascript:void(0)" target="_blank" class="bar-view">查看原图</a></td>
14                     <td align="right"><a href="javascript:void(0)" class="bar-next">下一作品集</a></td>
15                 </tr>
16             </table>
17         </div>
18         <a href="javascript:Viewer.prev()" class="arrow prev">上一张</a>
19         <a href="javascript:Viewer.next()" class="arrow next">下一张</a>
20     </div>
View Code

3、Javascript     

 1     <script type="text/javascript">
 2         $(function () {
 3             Viewer.init(); 
 4         });
 5         var Viewer = {
 6             wrap: $('.viewer'),
 7             listWrap: $('.list'),
 8             list: $('.list li'),
 9             nums: $('.list li').length,
10             barview: $('.bar-view'),
11             showbar: true,
12             init: function () {//初始化
13                 Viewer.show(1);
14             },
15             show: function (index) {//显示索引项
16                 if (Viewer.nums == 0) {
17                     Viewer.error();
18                 }
19                 var e = Viewer.list.first();
20                 var p = Viewer.wrap.find('a.prev');
21                 var n = Viewer.wrap.find('a.next');
22                 if (index < 2) {//显示第一项
23                     index = 1;
24                     e = Viewer.list.first();
25                     p.css({ left: -100 });
26                     n.css({ right: 0 });
27                 } else if (index >= Viewer.nums) {//显示最后一项
28                     index = Viewer.nums;
29                     e = Viewer.list.last();
30                     p.css({ left: 0 });
31                     n.css({ right: -100 });
32                 }
33                 else {//显示当前项
34                     p.css({ left: 0 });
35                     n.css({ right: 0 });
36                     e = Viewer.list.eq(index - 1);
37                 }
38                 e.fadeIn().siblings().fadeOut();
39                 Viewer.listWrap.attr('data', index);
40                 Viewer.barview.attr('href', e.find('img').attr('src'));
41                 var m = Viewer.wrap.find('a.arrow');
42                 var c = Viewer.wrap.find('.bar');
43                 Viewer.wrap.mouseover(function () {
44                     m.fadeTo(1, 0.5);
45                     if (Viewer.showbar) {
46                         c.fadeTo(1, 0.5);
47                     }
48                 }).mouseleave(function () {
49                     m.hide();
50                     c.hide();
51                 });
52             },
53             prev: function () {//上一项
54                 Viewer.show(parseInt(Viewer.listWrap.attr('data')) - 1);
55             },
56             next: function () {//下一项
57                 Viewer.show(parseInt(Viewer.listWrap.attr('data')) + 1);
58             },
59             error: function () {//错误提示
60                 Viewer.listWrap.remove();
61                 Viewer.wrap.append('<h5 style=\"text-align:center\">抱歉，出错啦！</h5>');
62                 return false;
63             }
64         }
65     </script>

4、实现效果

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

 

 

posted @ 2014-03-31 11:27  wyguo  阅读(961)  评论(0)  编辑  收藏  举报