将 Nivo Slider 更改为仅淡入淡出过渡
Posted
技术标签:
【中文标题】将 Nivo Slider 更改为仅淡入淡出过渡【英文标题】：Change Nivo Slider to fade transition only 【发布时间】：2017-01-29 14:35:00 【问题描述】：我的 wordpress 主题安装中的预打包 nivo 滑块存在一些问题。我想将过渡设置为仅淡入淡出，没有定向淡入淡出。目前它似乎被设置为随机。
代码如下，抱歉被缩小了（添加了未缩小的版本）：
/*
* jQuery Nivo Slider v3.2
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(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") + '" /></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("fade");
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)
任何帮助将不胜感激。
【问题讨论】：
只是一个简单的问题。你真的认为这个“代码”可以以任何可能的方式阅读吗？找到未缩小的代码，找到正确的代码（不是整个文件）并在此处发布。 是的，我为此道歉。这是我能找到的唯一版本。我对此并不精通，因此您必须接受我的道歉。 我找到了一个网站要缩小！ 【参考方案1】：使用淡入淡出效果instead 的random
$('#slider').nivoSlider(effect:'fade')
【讨论】：
感谢您的快速回复。我试图寻找它，但代码似乎没有它。我需要在某处添加/替换它吗？【参考方案2】：添加data-transition="fade"（或任何效果
【讨论】：
为什么？请添加一些解释，以便其他人可以从您的答案中学习以上是关于将 Nivo Slider 更改为仅淡入淡出过渡的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Bootstrap 3 Carousel 中更改滑动动画以淡入/淡出过渡