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:0; left:0; z-index:998;}
        .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:999;}
        .viewer a.prev { left:0;}
        .viewer a.next { right:0;}
    </style>

2、HTML    

    <div class="viewer">
        <ul class="list" data="1">
            <li><img src="images/temp/banner_1.jpg" alt="图片" /></li>
            <li><img src="images/temp/banner_2.jpg" alt="图片" /></li>
            <li><img src="images/temp/banner_3.jpg" alt="图片" /></li>
            <li><img src="images/temp/banner_4.jpg" alt="图片" /></li>
            <li><img src="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、实现效果

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