【发布时间】：2015-10-21 20:10:22
【问题描述】：
我刚刚根据我找到的教程创建了一个图像滑块。我只是贴了一些我在网上找到的快速图片来测试它，但我提出问题的原因是因为更改图像所需的时间变化很大。这将需要很长时间，然后它将开始每隔一两秒更改一次图像。如何使我的滑块具有一致的幻灯片过渡。
最好发布我的网站，以便您了解它在做什么。
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)
【问题讨论】：
-
可能与未预加载的图像有关。将 JS 中的图像定义为
img对象，而不仅仅是路径，它们应该预加载。此外，当您提供代码时，我们会更轻松。 -
你用的是什么插件？您尝试过什么代码（在此处发布）。该插件是否有文档和未缩小的版本？如果它有文档，您是否引用了它们？
-
插件是：jQuery Nivo Slider v3.2 * nivo.dev7studios.com.... 我复制了代码并制作了自己的文件，包括它到页面中。我正在按照教程显示的方式进行操作，并为我的图像创建了路径。
-
@Wobbles 我添加了 Jquery 代码。正如我所提到的，这一切都混在一起了，所以我很抱歉。
-
嗯嗯哈哈。将其放入 JS 格式化程序并编辑您的 ?带有一些可读的代码。
标签： javascript jquery html css image