图像滑块转换时间

Question

我刚刚根据我发现的教程创建了一个图像滑块。我刚刚在网上发现了一些快速的照片来测试它，但我问的问题是因为改变图像所需的时间变化很大。它将需要永远，然后它将开始每隔一两秒更改图像。如何使滑块具有一致的幻灯片过渡。

最好发布我的网站，以便了解它的作用。

realtorcatch.com

我正在使用插件javascript，所以代码是一个褶皱。有没有办法添加我自己的代码，以便相同的基本功能工作，但它的质量更好？

Jquery：

(function (e) {
var t = function (t, n) {
    var r = e.extend({}, e.fn.nivoSlider.defaults, n);
    var i = {
        currentSlide: 0,
        currentImage: "",
        totalSlides: 0,
        running: false,
        paused: false,
        stop: false,
        controlNavEl: false
    };
    var s = e(t);
    s.data("nivo:vars", i).addClass("nivoSlider");
    var o = s.children();
    o.each(function () {
        var t = e(this);
        var n = "";
        if (!t.is("img")) {
            if (t.is("a")) {
                t.addClass("nivo-imageLink");
                n = t
            }
            t = t.find("img:first")
        }
        var r = r === 0 ? t.attr("width") : t.width(),
            s = s === 0 ? t.attr("height") : t.height();
        if (n !== "") {
            n.css("display", "none")
        }
        t.css("display", "none");
        i.totalSlides++
    });
    if (r.randomStart) {
        r.startSlide = Math.floor(Math.random() * i.totalSlides)
    }
    if (r.startSlide > 0) {
        if (r.startSlide >= i.totalSlides) {
            r.startSlide = i.totalSlides - 1
        }
        i.currentSlide = r.startSlide
    }
    if (e(o[i.currentSlide]).is("img")) {
        i.currentImage = e(o[i.currentSlide])
    } else {
        i.currentImage = e(o[i.currentSlide]).find("img:first")
    }
    if (e(o[i.currentSlide]).is("a")) {
        e(o[i.currentSlide]).css("display", "block")
    }
    var u = e("<img/>").addClass("nivo-main-image");
    u.attr("src", i.currentImage.attr("src")).show();
    s.append(u);
    e(window).resize(function () {
        s.children("img").width(s.width());
        u.attr("src", i.currentImage.attr("src"));
        u.stop().height("auto");
        e(".nivo-slice").remove();
        e(".nivo-box").remove()
    });
    s.append(e('<div class="nivo-caption"></div>'));
    var a = function (t) {
        var n = e(".nivo-caption", s);
        if (i.currentImage.attr("title") != "" && i.currentImage.attr("title") != undefined) {
            var r = i.currentImage.attr("title");
            if (r.substr(0, 1) == "#") r = e(r).html();
            if (n.css("display") == "block") {
                setTimeout(function () {
                    n.html(r)
                }, t.animSpeed)
            } else {
                n.html(r);
                n.stop().fadeIn(t.animSpeed)
            }
        } else {
            n.stop().fadeOut(t.animSpeed)
        }
    };
    a(r);
    var f = 0;
    if (!r.manualAdvance && o.length > 1) {
        f = setInterval(function () {
            d(s, o, r, false)
        }, r.pauseTime)
    }
    if (r.directionNav) {
        s.append('<div class="nivo-directionNav"><a class="nivo-prevNav">' + r.prevText + '</a><a class="nivo-nextNav">' + r.nextText + "</a></div>");
        e(s).on("click", "a.nivo-prevNav", function () {
            if (i.running) {
                return false
            }
            clearInterval(f);
            f = "";
            i.currentSlide -= 2;
            d(s, o, r, "prev")
        });
        e(s).on("click", "a.nivo-nextNav", function () {
            if (i.running) {
                return false
            }
            clearInterval(f);
            f = "";
            d(s, o, r, "next")
        })
    }
    if (r.controlNav) {
        i.controlNavEl = e('<div class="nivo-controlNav"></div>');
        s.after(i.controlNavEl);
        for (var l = 0; l < o.length; l++) {
            if (r.controlNavThumbs) {
                i.controlNavEl.addClass("nivo-thumbs-enabled");
                var c = o.eq(l);
                if (!c.is("img")) {
                    c = c.find("img:first")
                }
                if (c.attr("data-thumb")) i.controlNavEl.append('<a class="nivo-control" rel="' + l + '"><img src="' + c.attr("data-thumb") + '" alt="" /></a>')
            } else {
                i.controlNavEl.append('<a class="nivo-control" rel="' + l + '">' + (l + 1) + "</a>")
            }
        }
        e("a:eq(" + i.currentSlide + ")", i.controlNavEl).addClass("active");
        e("a", i.controlNavEl).bind("click", function () {
            if (i.running) return false;
            if (e(this).hasClass("active")) return false;
            clearInterval(f);
            f = "";
            u.attr("src", i.currentImage.attr("src"));
            i.currentSlide = e(this).attr("rel") - 1;
            d(s, o, r, "control")
        })
    }
    if (r.pauseOnHover) {
        s.hover(function () {
            i.paused = true;
            clearInterval(f);
            f = ""
        }, function () {
            i.paused = false;
            if (f === "" && !r.manualAdvance) {
                f = setInterval(function () {
                    d(s, o, r, false)
                }, r.pauseTime)
            }
        })
    }
    s.bind("nivo:animFinished", function () {
        u.attr("src", i.currentImage.attr("src"));
        i.running = false;
        e(o).each(function () {
            if (e(this).is("a")) {
                e(this).css("display", "none")
            }
        });
        if (e(o[i.currentSlide]).is("a")) {
            e(o[i.currentSlide]).css("display", "block")
        }
        if (f === "" && !i.paused && !r.manualAdvance) {
            f = setInterval(function () {
                d(s, o, r, false)
            }, r.pauseTime)
        }
        r.afterChange.call(this)
    });
    var h = function (t, n, r) {
        if (e(r.currentImage).parent().is("a")) e(r.currentImage).parent().css("display", "block");
        e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
        var i = e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().is("a") ? e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().height() : e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height();
        for (var s = 0; s < n.slices; s++) {
            var o = Math.round(t.width() / n.slices);
            if (s === n.slices - 1) {
                t.append(e('<div class="nivo-slice" name="' + s + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (o + s * o - o) + 'px;" /></div>').css({
                    left: o * s + "px",
                    width: t.width() - o * s + "px",
                    height: i + "px",
                    opacity: "0",
                    overflow: "hidden"
                }))
            } else {
                t.append(e('<div class="nivo-slice" name="' + s + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (o + s * o - o) + 'px;" /></div>').css({
                    left: o * s + "px",
                    width: o + "px",
                    height: i + "px",
                    opacity: "0",
                    overflow: "hidden"
                }))
            }
        }
        e(".nivo-slice", t).height(i);
        u.stop().animate({
            height: e(r.currentImage).height()
        }, n.animSpeed)
    };
    var p = function (t, n, r) {
        if (e(r.currentImage).parent().is("a")) e(r.currentImage).parent().css("display", "block");
        e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
        var i = Math.round(t.width() / n.boxCols),
            s = Math.round(e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height() / n.boxRows);
        for (var o = 0; o < n.boxRows; o++) {
            for (var a = 0; a < n.boxCols; a++) {
                if (a === n.boxCols - 1) {
                    t.append(e('<div class="nivo-box" name="' + a + '" rel="' + o + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + s * o + "px; left:-" + i * a + 'px;" /></div>').css({
                        opacity: 0,
                        left: i * a + "px",
                        top: s * o + "px",
                        width: t.width() - i * a + "px"
                    }));
                    e('.nivo-box[name="' + a + '"]', t).height(e('.nivo-box[name="' + a + '"] img', t).height() + "px")
                } else {
                    t.append(e('<div class="nivo-box" name="' + a + '" rel="' + o + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + s * o + "px; left:-" + i * a + 'px;" /></div>').css({
                        opacity: 0,
                        left: i * a + "px",
                        top: s * o + "px",
                        width: i + "px"
                    }));
                    e('.nivo-box[name="' + a + '"]', t).height(e('.nivo-box[name="' + a + '"] img', t).height() + "px")
                }
            }
        }
        u.stop().animate({
            height: e(r.currentImage).height()
        }, n.animSpeed)
    };
    var d = function (t, n, r, i) {
        var s = t.data("nivo:vars");
        if (s && s.currentSlide === s.totalSlides - 1) {
            r.lastSlide.call(this)
        }
        if ((!s || s.stop) && !i) {
            return false
        }
        r.beforeChange.call(this);
        if (!i) {
            u.attr("src", s.currentImage.attr("src"))
        } else {
            if (i === "prev") {
                u.attr("src", s.currentImage.attr("src"))
            }
            if (i === "next") {
                u.attr("src", s.currentImage.attr("src"))
            }
        }
        s.currentSlide++;
        if (s.currentSlide === s.totalSlides) {
            s.currentSlide = 0;
            r.slideshowEnd.call(this)
        }
        if (s.currentSlide < 0) {
            s.currentSlide = s.totalSlides - 1
        }
        if (e(n[s.currentSlide]).is("img")) {
            s.currentImage = e(n[s.currentSlide])
        } else {
            s.currentImage = e(n[s.currentSlide]).find("img:first")
        }
        if (r.controlNav) {
            e("a", s.controlNavEl).removeClass("active");
            e("a:eq(" + s.currentSlide + ")", s.controlNavEl).addClass("active")
        }
        a(r);
        e(".nivo-slice", t).remove();
        e(".nivo-box", t).remove();
        var o = r.effect,
            f = "";
        if (r.effect === "random") {
            f = new Array("sliceDownRight", "sliceDownLeft", "sliceUpRight", "sliceUpLeft", "sliceUpDown", "sliceUpDownLeft", "fold", "fade", "boxRandom", "boxRain", "boxRainReverse", "boxRainGrow", "boxRainGrowReverse");
            o = f[Math.floor(Math.random() * (f.length + 1))];
            if (o === undefined) {
                o = "fade"
            }
        }
        if (r.effect.indexOf(",") !== -1) {
            f = r.effect.split(",");
            o = f[Math.floor(Math.random() * f.length)];
            if (o === undefined) {
                o = "fade"
            }
        }
        if (s.currentImage.attr("data-transition")) {
            o = s.currentImage.attr("data-transition")
        }
        s.running = true;
        var l = 0,
            c = 0,
            d = "",
            m = "",
            g = "",
            y = "";
        if (o === "sliceDown" || o === "sliceDownRight" || o === "sliceDownLeft") {
            h(t, r, s);
            l = 0;
            c = 0;
            d = e(".nivo-slice", t);
            if (o === "sliceDownLeft") {
                d = e(".nivo-slice", t)._reverse()
            }
            d.each(function () {
                var n = e(this);
                n.css({
                    top: "0px"
                });
                if (c === r.slices - 1) {
                    setTimeout(function () {
                        n.animate({
                            opacity: "1.0"
                        }, r.animSpeed, "", function () {
                            t.trigger("nivo:animFinished")
                        })
                    }, 100 + l)
                } else {
                    setTimeout(function () {
                        n.animate({
                            opacity: "1.0"
                        }, r.animSpeed)
                    }, 100 + l)
                }
                l += 50;
                c++
            })
        } else if (o === "sliceUp" || o === "sliceUpRight" || o === "sliceUpLeft") {
            h(t, r, s);
            l = 0;
            c = 0;
            d = e(".nivo-slice", t);
            if (o === "sliceUpLeft") {
                d = e(".nivo-slice", t)._reverse()
            }
            d.each(function () {
                var n = e(this);
                n.css({
                    bottom: "0px"
                });
                if (c === r.slices - 1) {
                    setTimeout(function () {
                        n.animate({
                            opacity: "1.0"
                        }, r.animSpeed, "", function () {
                            t.trigger("nivo:animFinished")
                        })
                    }, 100 + l)
                } else {
                    setTimeout(function () {
                        n.animate({
                            opacity: "1.0"
                        }, r.animSpeed)
                    }, 100 + l)
                }
                l += 50;
                c++
            })
        } else if (o === "sliceUpDown" || o === "sliceUpDownRight" || o === "sliceUpDownLeft") {
            h(t, r, s);
            l = 0;
            c = 0;
            var b = 0;
            d = e(".nivo-slice", t);
            if (o === "sliceUpDownLeft") {
                d = e(".nivo-slice", t)._reverse()
            }
            d.each(function () {
                var n = e(this);
                if (c === 0) {
                    n.css("top", "0px");
                    c++
                } else {
                    n.css("bottom", "0px");
                    c = 0
                }
                if (b === r.slices - 1) {
                    setTimeout(function () {
                        n.animate({
                            opacity: "1.0"
                        }, r.animSpeed, "", function () {
                            t.trigger("nivo:animFinished")
                        })
                    }, 100 + l)
                } else {
                    setTimeout(function () {
                        n.animate({
                            opacity: "1.0"
                        }, r.animSpeed)
                    }, 100 + l)
                }
                l += 50;
                b++
            })
        } else if (o === "fold") {
            h(t, r, s);
            l = 0;
            c = 0;
            e(".nivo-slice", t).each(function () {
                var n = e(this);
                var i = n.width();
                n.css({
                    top: "0px",
                    width: "0px"
                });
                if (c === r.slices - 1) {
                    setTimeout(function () {
                        n.animate({
                            width: i,
                            opacity: "1.0"
                        }, r.animSpeed, "", function () {
                            t.trigger("nivo:animFinished")
                        })
                    }, 100 + l)
                } else {
                    setTimeout(function () {
                        n.animate({
                            width: i,
                            opacity: "1.0"
                        }, r.animSpeed)
                    }, 100 + l)
                }
                l += 50;
                c++
            })
        } else if (o === "fade") {
            h(t, r, s);
            m = e(".nivo-slice:first", t);
            m.css({
                width: t.width() + "px"
            });
            m.animate({
                opacity: "1.0"
            }, r.animSpeed * 2, "", function () {
                t.trigger("nivo:animFinished")
            })
        } else if (o === "slideInRight") {
            h(t, r, s);
            m = e(".nivo-slice:first", t);
            m.css({
                width: "0px",
                opacity: "1"
            });
            m.animate({
                width: t.width() + "px"
            }, r.animSpeed * 2, "", function () {
                t.trigger("nivo:animFinished")
            })
        } else if (o === "slideInLeft") {
            h(t, r, s);
            m = e(".nivo-slice:first", t);
            m.css({
                width: "0px",
                opacity: "1",
                left: "",
                right: "0px"
            });
            m.animate({
                width: t.width() + "px"
            }, r.animSpeed * 2, "", function () {
                m.css({
                    left: "0px",
                    right: ""
                });
                t.trigger("nivo:animFinished")
            })
        } else if (o === "boxRandom") {
            p(t, r, s);
            g = r.boxCols * r.boxRows;
            c = 0;
            l = 0;
            y = v(e(".nivo-box", t));
            y.each(function () {
                var n = e(this);
                if (c === g - 1) {
                    setTimeout(function () {
                        n.animate({
                            opacity: "1"
                        }, r.animSpeed, "", function () {
                            t.trigger("nivo:animFinished")
                        })
                    }, 100 + l)
                } else {
                    setTimeout(function () {
                        n.animate({
                            opacity: "1"
                        }, r.animSpeed)
                    }, 100 + l)
                }
                l += 20;
                c++
            })
        } else if (o === "boxRain" || o === "boxRainReverse" || o === "boxRainGrow" || o === "boxRainGrowReverse") {
            p(t, r, s);
            g = r.boxCols * r.boxRows;
            c = 0;
            l = 0;
            var w = 0;
            var E = 0;
            var S = [];
            S[w] = [];
            y = e(".nivo-box", t);
            if (o === "boxRainReverse" || o === "boxRainGrowReverse") {
                y = e(".nivo-box", t)._reverse()
            }
            y.each(function () {
                S[w][E] = e(this);
                E++;
                if (E === r.boxCols) {
                    w++;
                    E = 0;
                    S[w] = []
                }
            });
            for (var x = 0; x < r.boxCols * 2; x++) {
                var T = x;
                for (var N = 0; N < r.boxRows; N++) {
                    if (T >= 0 && T < r.boxCols) {
                        (function (n, i, s, u, a) {
                            var f = e(S[n][i]);
                            var l = f.width();
                            var c = f.height();
                            if (o === "boxRainGrow" || o === "boxRainGrowReverse") {
                                f.width(0).height(0)
                            }
                            if (u === a - 1) {
                                setTimeout(function () {
                                    f.animate({
                                        opacity: "1",
                                        width: l,
                                        height: c
                                    }, r.animSpeed / 1.3, "", function () {
                                        t.trigger("nivo:animFinished")
                                    })
                                }, 100 + s)
                            } else {
                                setTimeout(function () {
                                    f.animate({
                                        opacity: "1",
                                        width: l,
                                        height: c
                                    }, r.animSpeed / 1.3)
                                }, 100 + s)
                            }
                        })(N, T, l, c, g);
                        c++
                    }
                    T--
                }
                l += 100
            }
        }
    };
    var v = function (e) {
        for (var t, n, r = e.length; r; t = parseInt(Math.random() * r, 10), n = e[--r], e[r] = e[t], e[t] = n);
        return e
    };
    var m = function (e) {
        if (this.console && typeof console.log !== "undefined") {
            console.log(e)
        }
    };
    this.stop = function () {
        if (!e(t).data("nivo:vars").stop) {
            e(t).data("nivo:vars").stop = true;
            m("Stop Slider")
        }
    };
    this.start = function () {
        if (e(t).data("nivo:vars").stop) {
            e(t).data("nivo:vars").stop = false;
            m("Start Slider")
        }
    };
    r.afterLoad.call(this);
    return this
};
e.fn.nivoSlider = function (n) {
    return this.each(function (r, i) {
        var s = e(this);
        if (s.data("nivoslider")) {
            return s.data("nivoslider")
        }
        var o = new t(this, n);
        s.data("nivoslider", o)
    })
};
e.fn.nivoSlider.defaults = {
    effect: "random",
    slices: 15,
    boxCols: 8,
    boxRows: 4,
    animSpeed: 500,
    pauseTime: 3e3,
    startSlide: 0,
    directionNav: true,
    controlNav: true,
    controlNavThumbs: false,
    pauseOnHover: true,
    manualAdvance: false,
    prevText: "Prev",
    nextText: "Next",
    randomStart: false,
    beforeChange: function () {},
    afterChange: function () {},
    slideshowEnd: function () {},
    lastSlide: function () {},
    afterLoad: function () {}
};
e.fn._reverse = [].reverse
})(jQuery)

Answer 1

这样的事情：

r.startSlide = Math.floor（Math.random（）* i.totalSlides）

是这里的问题，它是故意编程的。

有更简单的滑块，即使只有css。

我有一个完全响应的，如果你想要，请告诉我。

Answer 2

@Becky 好的，我会解释最重要的事情。 在HTML中使用img标签，这样很容易推迟加载或延迟加载图片。
在CSS中，首先是关键帧，如果您希望图像以不同方式滑动，请告诉我，我可以更改它。 这个例子适用于所有设备并且完全响应，一些非常旧的手机只会从左到右滑动史诗，即不支持变换的手机，但它仍然有用，你需要一些额外的前缀，如果你愿意，我可以添加它们 第23行我将整个内容包装为flexbox。 第41行我们只是声明了数字元素的宽度（你也可以在这里使用div，它并不重要），宽度是800％，因为我们在这个滑块中有8个图片。如果它是5个图片，我们会说宽度是500％等 我们拿出边距，填充等，img float left只是为了避免IE中的一些不一致。 这个滑块的作用是，当我们改变边距时，它将图片推向左边，在关键帧中看到，我们将其向下推100％用于下一张图片，200％用于之后的图片等。
我们声明图元素中的img宽度为12.5％（100％/ 8pics = 12.5％），如果我们有5个图片，img宽度将是20％等。 最后，定义了滑块div，你可以在这里更改边框，或者框阴影和背景颜色，所以当图片没有填充框架时，你可以选择背景颜色，我已经设置了它在这里透明。
此滑块必须隐藏溢出，宽度设置为80％或最大值为500pix，以先到者为准。

<div class="superslide"><div id="slider">
<figure>
<img  src="http://generalunion.org/Joomla/images/holidays.jpg" 
width=350      height=350>

http://codepen.io/damianocel/pen/OyzaZB

就是这样，没有JS，重量很轻，反应灵敏，适用于所有设备。 您可以将它用作完整的backkground滑块等，只需确保图片大小相同。

要更改动画的速度，只需转到第49行和第50行来更改时间参数（此处为28s）。