多图点击放大并左右滑动
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: "<", b.appendChild(w), C = y("button"), C.id = "next-button", C.innerHTML = L.svg ? x: ">", 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>
