多图点击放大并左右滑动

css部分：

    <style type="text/css">
        body {  color: #666; font-family: Helvetica, Arial, sans-serif;  margin: 0;    width:100%;max-width:600px;min-width:300px;background:#ccc;}
        #quanzi-all-main {margin:10px 10px 10px 200px;padding:15px 10px;overflow:hidden;background:#fff;}
        .quanzi-one {height:auto;overflow:hidden;}
        .clear {height:1px;border-top:1px #ccc dashed;margin:1rem 0;}
        .gallery { text-align: center;}
        .quanzi-title {margin:0 0 0.5rem 0;line-height:1.4rem;font-size:0.9rem; }
        .gallery:after { content: ''; display: block; height: 2px; margin: .5em 0 1.4em;}
        .gallery a { display: inline-block;  overflow: hidden;float:left;text-align:center;}
        .baguetteBoxOne {width:100%; margin:10px auto;}

        /* 放大图片之后的样式 */
        #baguetteBox-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:1000000;background-color:#222;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}
        #baguetteBox-overlay.visible{opacity:1}
        #baguetteBox-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}
        #baguetteBox-overlay .full-image figure{display:inline;margin:0;height:100%}
        #baguetteBox-overlay .full-image img{display:inline-block;width:auto;height:auto;max-height:100%;max-width:100%; vertical-align:middle; }
        #baguetteBox-overlay .full-image figcaption{display:block;position:absolute;bottom:0;width:100%;text-align:center;line-height:1.8;color:#ccc;background-color:#000;background-color:rgba(0,0,0,.6);font-family:sans-serif}
        #baguetteBox-overlay .full-image:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}
        #baguetteBox-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;-webkit-transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,-moz-transform .4s ease;transition:left .4s ease,transform .4s ease}
        #baguetteBox-slider.bounce-from-right{-webkit-animation:bounceFromRight .4s ease-out;animation:bounceFromRight .4s ease-out}
        #baguetteBox-slider.bounce-from-left{-webkit-animation:bounceFromLeft .4s ease-out;animation:bounceFromLeft .4s ease-out}
        .baguetteBox-button#next-button,.baguetteBox-button#previous-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}
        .baguetteBox-button{position:absolute;cursor:pointer;outline:0;padding:0;margin:0;border:0;-moz-border-radius:15%;border-radius:15%;background-color:#323232;background-color:rgba(50,50,50,.5);color:#ddd;font:1.6em sans-serif;-webkit-transition:background-color .4s ease;transition:background-color .4s ease}
        .baguetteBox-button:hover{background-color:rgba(50,50,50,.9)}
        .baguetteBox-button#next-button{right:2%}
        .baguetteBox-button#previous-button{left:2%}
        .baguetteBox-button#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}
        .baguetteBox-button svg{position:absolute;left:0;top:0}
        .spinner{width:40px;height:40px;display:inline-block;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px}
        .double-bounce1,.double-bounce2{width:100%;height:100%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}
        .double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}
        @-webkit-keyframes bounceFromRight{0%{margin-left:0}50%{margin-left:-30px}100%{margin-left:0}}
        @keyframes bounceFromRight{0%{margin-left:0}50%{margin-left:-30px}100%{margin-left:0}}
        @-webkit-keyframes bounceFromLeft{0%{margin-left:0}50%{margin-left:30px}100%{margin-left:0}}
        @keyframes bounceFromLeft{0%{margin-left:0}50%{margin-left:30px}100%{margin-left:0}}
        @-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}
            50%{-webkit-transform:scale(1);transform:scale(1)}}
        @keyframes bounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}
            50%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}

    </style>

html部分：

<div id="quanzi-all-main">

    <!-- 代码 开始 -->
    <div class="quanzi-one">
        <div class="quanzi-title">分离焦虑必须经由分离才能解决，但如何对待孩子因为分离产生的情绪十分重要。我们以往对待分离情绪的态度，往往会走向两个极端。</div>
        <div class="baguetteBoxOne gallery">
            <a href="../../../../img/9.jpg" ><img src="../../../../img/9.jpg"></a>
        </div>
    </div>
    <div class="clear"></div>
    <!-- 代码 结束 -->

    <!-- 代码 开始 -->
    <div class="quanzi-one">
        <div class="quanzi-title">分离焦虑必须经由分离才能解决</div>
        <div class="baguetteBoxOne gallery">
            <a href="../../../../img/1.jpg" data-caption="1"><img src="../../../../img/1.jpg"></a>
            <a href="../../../../img/2.jpg" data-caption="2"><img src="../../../../img/2.jpg"></a>
            <a href="../../../../img/3.jpg" data-caption="3"><img src="../../../../img/3.jpg"></a>
            <a href="../../../../img/4.jpg" data-caption="4"><img src="../../../../img/4.jpg"></a>
        </div>
    </div>
    <div class="clear"></div>
    <!-- 代码 结束 -->

</div>

js部分：（此处需要引入jquery.js）

<script>
    var baguetteBox = function() {
        function t(t, n) {
            L.transforms = f(),
                    L.svg = p(),
                    e(),
                    D = document.querySelectorAll(t),
                    [].forEach.call(D,
                            function(t) {
                                var e = t.getElementsByTagName("a");
                                e = [].filter.call(e,
                                        function(t) {
                                            return j.test(t.href)
                                        });
                                var o = S.length;
                                S.push(e),
                                        S[o].options = n,
                                        [].forEach.call(S[o],
                                                function(t, e) {
                                                    h(t, "click",
                                                            function(t) {
                                                                t.preventDefault ? t.preventDefault() : t.returnValue = !1,
                                                                        i(o),
                                                                        a(e)
                                                            })
                                                })
                            })
        }
        function e() {
            return (b = v("baguetteBox-overlay")) ? (k = v("baguetteBox-slider"), void(w = v("previous-button"), C = v("next-button"), T = v("close-button"))) : (b = y("div"), b.id = "baguetteBox-overlay", document.getElementsByTagName("body")[0].appendChild(b), k = y("div"), k.id = "baguetteBox-slider", b.appendChild(k), w = y("button"), w.id = "previous-button", w.innerHTML = L.svg ? E: "&lt;", b.appendChild(w), C = y("button"), C.id = "next-button", C.innerHTML = L.svg ? x: "&gt;", b.appendChild(C), T = y("button"), T.id = "close-button", T.innerHTML = L.svg ? B: "X", b.appendChild(T), w.className = C.className = T.className = "baguetteBox-button", void n())
        }

        ////*

        ////*

        function n() {
            //      h(b, "click",
            //      function(t) {
            //          t.target && "IMG" !== t.target.nodeName && "FIGCAPTION" !== t.target.nodeName && s()
            //      }),
            h(w, "click",
                    function(t) {
                        t.stopPropagation ? t.stopPropagation() : t.cancelBubble = !0,
                                c()
                    }),
                    h(C, "click",
                            function(t) {
                                t.stopPropagation ? t.stopPropagation() : t.cancelBubble = !0,
                                        u()
                            }),
                    h(T, "click",
                            function(t) {
                                t.stopPropagation ? t.stopPropagation() : t.cancelBubble = !0,
                                        s()
                            }),
                    h(b, "touchstart",
                            function(t) {
                                N = t.changedTouches[0].pageX
                            }),
                    h(b, "touchmove",
                            function(t) {
                                H || (t.preventDefault ? t.preventDefault() : t.returnValue = !1, touch = t.touches[0] || t.changedTouches[0], touch.pageX - N > 40 ? (H = !0, c()) : touch.pageX - N < -40 && (H = !0, u()))
                            }),
                    h(b, "touchend",
                            function() {
                                H = !1
                            }),
                    h(document, "keydown",
                            function(t) {
                                switch (t.keyCode) {
                                    case 37:
                                        c();
                                        break;
                                    case 39:
                                        u();
                                        break;
                                    case 27:
                                        s()
                                }
                            })
        }
        function i(t) {
            if (A !== t) {
                for (A = t, o(S[t].options); k.firstChild;) k.removeChild(k.firstChild);
                X.length = 0;
                for (var e, n = 0; n < S[t].length; n++) e = y("div"),
                        e.className = "full-image",
                        e.id = "baguette-img-" + n,
                        X.push(e),
                        k.appendChild(X[n])
            }
        }

        function o(t) {
            t || (t = {});
            for (var e in P) I[e] = P[e],
            "undefined" != typeof t[e] && (I[e] = t[e]);
            k.style.transition = k.style.webkitTransition = "fadeIn" === I.animation ? "all .4s ease": "slideIn" === I.animation ? "": "all .3s ease",
            "auto" === I.buttons && ("ontouchstart" in window || 1 === S[A].length) && (I.buttons = !1),
                    w.style.display = C.style.display = I.buttons ? "": "none"
        }
        function a(t) {
            "block" !== b.style.display && (M = t, r(M,
                    function() {
                        g(M),
                                m(M)
                    }), d(), b.style.display = "block", setTimeout(function() {
                        b.className = "visible"
                    },
                    50))
        }
        function s() {
            "none" !== b.style.display && (b.className = "", setTimeout(function() {
                        b.style.display = "none"
                    },
                    500))
        }
        function r(t, e) {
            var n = X[t];
            if ("undefined" != typeof n) {
                if (n.getElementsByTagName("img")[0]) return void(e && e());
                imageElement = S[A][t],
                        imageCaption = imageElement.getAttribute("data-caption") || imageElement.title,
                        imageSrc = l(imageElement);
                var i = y("figure"),
                        o = y("img"),
                        a = y("figcaption");
                n.appendChild(i),
                        i.innerHTML = '<div class="spinner"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>',
                        o.onload = function() {
                            var n = document.querySelector("#baguette-img-" + t + " .spinner");
                            i.removeChild(n),
                            !I.async && e && e()
                        },
                        o.setAttribute("src", imageSrc),
                        i.appendChild(o),
                I.captions && imageCaption && (a.innerHTML = imageCaption, i.appendChild(a)),
                I.async && e && e()
            }
        }
        function l(t) {
            var e = imageElement.href;
            if (t.dataset) {
                var n = [];
                for (var i in t.dataset)"at-" !== i.substring(0, 3) || isNaN(i.substring(3)) || (n[i.replace("at-", "")] = t.dataset[i]);
                keys = Object.keys(n).sort(function(t, e) {
                    return parseInt(t) < parseInt(e) ? -1 : 1
                });
                for (var o = window.innerWidth * window.devicePixelRatio,
                             a = 0; a < keys.length - 1 && keys[a] < o;) a++;
                e = n[keys[a]] || e
            }
            return e
        }
        function u() {
            M <= X.length - 2 ? (M++, d(), g(M)) : I.animation && (k.className = "bounce-from-right", setTimeout(function() {
                        k.className = ""
                    },
                    400))
        }
        function c() {
            M >= 1 ? (M--, d(), m(M)) : I.animation && (k.className = "bounce-from-left", setTimeout(function() {
                        k.className = ""
                    },
                    400))
        }
        function d() {
            var t = 100 * -M + "%";
            "slideIn" === I.animation ? (k.style.opacity = 0, setTimeout(function() {
                        L.transforms ? k.style.transform = k.style.webkitTransform = "translate3d(" + t + ",0,0)": k.style.left = t,
                                k.style.opacity = 1
                    },
                    400)) : L.transforms ? k.style.transform = k.style.webkitTransform = "translate3d(" + t + ",0,0)": k.style.left = t
        }
        function f() {
            var t = y("div");
            return "undefined" != typeof t.style.perspective || "undefined" != typeof t.style.webkitPerspective
        }
        function p() {
            var t = y("div");
            return t.innerHTML = "<svg/>",
            "http://www.w3.org/2000/svg" == (t.firstChild && t.firstChild.namespaceURI)
        }
        function g(t) {
            t - M >= I.preload || r(t + 1,
                    function() {
                        g(t + 1)
                    })
        }
        function m(t) {
            M - t >= I.preload || r(t - 1,
                    function() {
                        m(t - 1)
                    })
        }
        function h(t, e, n) {
            t.addEventListener ? t.addEventListener(e, n, !1) : t.attachEvent("on" + e, n)
        }
        function v(t) {
            return document.getElementById(t)
        }
        function y(t) {
            return document.createElement(t)
        }
        var b, k, w, C, T, N, E = '<svg width="44" height="60"><polyline points="30 10 10 30 30 50" stroke="rgba(255,255,255,0.5)" stroke-width="4"stroke-linecap="butt" fill="none" stroke-linejoin="round"/></svg>',
                x = '<svg width="44" height="60"><polyline points="14 10 34 30 14 50" stroke="rgba(255,255,255,0.5)" stroke-width="4"stroke-linecap="butt" fill="none" stroke-linejoin="round"/></svg>',
                B = '<svg width="30" height="30"><g stroke="rgb(160, 160, 160)" stroke-width="4"><line x1="5" y1="5" x2="25" y2="25"/><line x1="5" y1="25" x2="25" y2="5"/></g></svg>',
                I = {},
                P = {
                    captions: !0,
                    buttons: "auto",
                    async: !1,
                    preload: 2,
                    animation: "slideIn"
                },
                L = {},
                M = 0,
                A = -1,
                H = !1,
                j = /.+.(gif|jpe?g|png|webp)/i,
                D = [],
                S = [],
                X = [];
        return [].forEach || (Array.prototype.forEach = function(t, e) {
            for (var n = 0; n < this.length; n++) t.call(e, this[n], n, this)
        }),
        [].filter || (Array.prototype.filter = function(t, e, n, i, o) {
            for (n = this, i = [], o = 0; o < n.length; o++) t.call(e, n[o], o, n) && i.push(n[o]);
            return i
        }),
        {
            run: t
        }
    } ();
</script>
<script>
    // 先判断baguetteBoxOne 的数量，并给每一个baguetteBoxOne 加上相应的ID值 然后给出旗下a标签不同的样式属性。
    $(document).ready(function(){

        var ln=$(".baguetteBoxOne").size();
        var obj = $('.baguetteBoxOne');

        obj.each(function(i){ $(this).attr('id',"quanzi-pic_"+i); })

        for (var i=0; i < ln; i++){

            var j=$("#quanzi-pic_"+i).find("a").size();
            if(j==1) {
                $("#quanzi-pic_"+i).find("a").css({"width":"80%","max-height":"220px"});
                $("#quanzi-pic_"+i).find("a").find("img").css({"width":"100%"});
            }
            else if(j==2 || j==4) {
                $("#quanzi-pic_"+i).find("a").css({"width":"48%","height":"100px","margin":"0 2% 0.6rem 0"});
                $("#quanzi-pic_"+i).find("a").find("img").css({"min-width":"100%","min-height":"120px","max-width":"200%"});
            }
            else if(j>4 || j==3) {
                $("#quanzi-pic_"+i).find("a").css({"width":"32%","height":"60px","margin": "0 1.3% 0.6rem 0"});
                $("#quanzi-pic_"+i).find("a").find("img").css({"min-width":"100%","min-height":"60px","max-width":"200%"});
            }
        }
    });
</script>
<script> <!-- 这段JS 要放在最后面 -->
baguetteBox.run('.baguetteBoxOne', {
    animation: 'fadeIn',
});
</script>