javascript - 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);

我随机尝试重命名“resize”，但效果不太好。

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
      }

不确定，但这就是我所理解的解决方案。