jQuery的背景幻燈片

Question

我試圖創建淡入淡出效果背景幻燈片，我發現這個腳本，這是否精美：http://srobbin.com/jquery-plugins/backstretch/

，我遇到的是，它的問題重新大小的圖像，它我想禁用/刪除。

這是代碼：

/*! Backstretch - v2.0.3 - 2012-11-30 
* http://srobbin.com/jquery-plugins/backstretch/ 
* Copyright (c) 2012 Scott Robbin; Licensed MIT */ (function (e, t, n) { 
    "use strict"; 
    e.fn.backstretch = function (r, s) { 
     return (r === n || r.length === 0) && e.error("No images were supplied for Backstretch"), e(t).scrollTop() === 0 && t.scrollTo(0, 0), this.each(function() { 
      var t = e(this), 
       n = t.data("backstretch"); 
      n && (s = e.extend(n.options, s), n.destroy(!0)), n = new i(this, r, s), t.data("backstretch", n) 
     }) 
    }, e.backstretch = function (t, n) { 
     return e("body").backstretch(t, n).data("backstretch") 
    }, e.expr[":"].backstretch = function (t) { 
     return e(t).data("backstretch") !== n 
    }, e.fn.backstretch.defaults = { 
     centeredX: !0, 
     centeredY: !0, 
     duration: 5e3, 
     fade: 0 
    }; 
    var r = { 
     wrap: { 
      left: 0, 
      top: 0, 
      overflow: "hidden", 
      margin: 0, 
      padding: 0, 
      height: "100%", 
      width: "100%", 
      zIndex: -999999 
     }, 
     img: { 
      position: "absolute", 
      display: "none", 
      margin: 0, 
      padding: 0, 
      border: "none", 
      width: "auto", 
      height: "auto", 
      maxWidth: "none", 
      zIndex: -999999 
     } 
    }, i = function (n, i, o) { 
      this.options = e.extend({}, e.fn.backstretch.defaults, o || {}), this.images = e.isArray(i) ? i : [i], e.each(this.images, function() { 
       e("<img />")[0].src = this 
      }), this.isBody = n === document.body, this.$container = e(n), this.$wrap = e('<div class="backstretch"></div>').css(r.wrap).appendTo(this.$container), this.$root = this.isBody ? s ? e(t) : e(document) : this.$container; 
      if (!this.isBody) { 
       var u = this.$container.css("position"), 
        a = this.$container.css("zIndex"); 
       this.$container.css({ 
        position: u === "static" ? "relative" : u, 
        zIndex: a === "auto" ? 0 : a, 
        background: "none" 
       }), this.$wrap.css({ 
        zIndex: -999998 
       }) 
      } 
      this.$wrap.css({ 
       position: this.isBody && s ? "fixed" : "absolute" 
      }), this.index = 0, this.show(this.index), e(t).on("resize.backstretch", e.proxy(this.resize, this)).on("orientationchange.backstretch", e.proxy(function() { 
       this.isBody && t.pageYOffset === 0 && (t.scrollTo(0, 1), this.resize()) 
      }, this)) 
     }; 
    i.prototype = { 
     resize: function() { 
      try { 
       var e = { 
        left: 0, 
        top: 0 
       }, n = this.isBody ? this.$root.width() : this.$root.innerWidth(), 
        r = n, 
        i = this.isBody ? t.innerHeight ? t.innerHeight : this.$root.height() : this.$root.innerHeight(), 
        s = r/this.$img.data("ratio"), 
        o; 
       s >= i ? (o = (s - i)/2, this.options.centeredY && (e.top = "-" + o + "px")) : (s = i, r = s * this.$img.data("ratio"), o = (r - n)/2, this.options.centeredX && (e.left = "-" + o + "px")), this.$wrap.css({ 
        width: n, 
        height: i 
       }).find("img:not(.deleteable)").css({ 
        width: r, 
        height: s 
       }).css(e) 
      } catch (u) {} 
      return this 
     }, 
     show: function (t) { 
      if (Math.abs(t) > this.images.length - 1) return; 
      this.index = t; 
      var n = this, 
       i = n.$wrap.find("img").addClass("deleteable"), 
       s = e.Event("backstretch.show", { 
        relatedTarget: n.$container[0] 
       }); 
      return clearInterval(n.interval), n.$img = e("<img />").css(r.img).bind("load", function (t) { 
       var r = this.width || e(t.target).width(), 
        o = this.height || e(t.target).height(); 
       e(this).data("ratio", r/o), e(this).fadeIn(n.options.speed || n.options.fade, function() { 
        i.remove(), n.paused || n.cycle(), n.$container.trigger(s, n) 
       }), n.resize() 
      }).appendTo(n.$wrap), n.$img.attr("src", n.images[t]), n 
     }, 
     next: function() { 
      return this.show(this.index < this.images.length - 1 ? this.index + 1 : 0) 
     }, 
     prev: function() { 
      return this.show(this.index === 0 ? this.images.length - 1 : this.index - 1) 
     }, 
     pause: function() { 
      return this.paused = !0, this 
     }, 
     resume: function() { 
      return this.paused = !1, this.next(), this 
     }, 
     cycle: function() { 
      return this.images.length > 1 && (clearInterval(this.interval), this.interval = setInterval(e.proxy(function() { 
       this.paused || this.next() 
      }, this), this.options.duration)), this 
     }, 
     destroy: function (n) { 
      e(t).off("resize.backstretch orientationchange.backstretch"), clearInterval(this.interval), n || this.$wrap.remove(), this.$container.removeData("backstretch") 
     } 
    }; 
    var s = function() { 
     var e = navigator.userAgent, 
      n = navigator.platform, 
      r = e.match(/AppleWebKit\/([0-9]+)/), 
      i = !! r && r[1], 
      s = e.match(/Fennec\/([0-9]+)/), 
      o = !! s && s[1], 
      u = e.match(/Opera Mobi\/([0-9]+)/), 
      a = !! u && u[1], 
      f = e.match(/MSIE ([0-9]+)/), 
      l = !! f && f[1]; 
     return !((n.indexOf("iPhone") > -1 || n.indexOf("iPad") > -1 || n.indexOf("iPod") > -1) && i && i < 534 || t.operamini && {}.toString.call(t.operamini) === "[object OperaMini]" || u && a < 7458 || e.indexOf("Android") > -1 && i && i < 533 || o && o < 6 || "palmGetResource" in t && i && i < 534 || e.indexOf("MeeGo") > -1 && e.indexOf("NokiaBrowser/8.5.0") > -1 || l && l <= 6) 
    }() 
})(jQuery, window); 

我隨機嘗試重新命名「調整」，但沒有工作太清楚了。

Answer 1

我想很難理解你的問題，但我仍然不知道如果我理解正確你的問題，反正我的解決方案，如果你正在尋找讓所有的圖像相同尺寸總是對每個圖像添加min width和min-height值圖像的css樣式，如果圖像的風格是「IMG：{}」這樣：

img: { 
      position: "absolute", 
      display: "none", 
      margin: 0, 
      padding: 0, 
      border: "none", 
      width: "value", 
      height: "value", 
      min-width: "same value", 
      min-height: "same value", 
      maxWidth: "none", 
      zIndex: -999999 
     } 

不知道，不過這是我的理解的解決方案。