将 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】:

使用淡入淡出效果insteadrandom

$('#slider').nivoSlider(effect:'fade')

【讨论】:

感谢您的快速回复。我试图寻找它,但代码似乎没有它。我需要在某处添加/替换它吗?【参考方案2】:

添加data-transition="fade"(或任何效果

【讨论】:

为什么?请添加一些解释,以便其他人可以从您的答案中学习

以上是关于将 Nivo Slider 更改为仅淡入淡出过渡的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Bootstrap 3 Carousel 中更改滑动动画以淡入/淡出过渡

使 Nivo Slider 在加载时淡入

如何在 Flutter 中移除原生闪屏和主屏幕之间的默认淡入淡出过渡? (仅使用本机启动画面)

加载时淡入淡出过渡到 div [重复]

Flutter-当内容更改时淡入淡出动画文本小部件

淡入/淡出的简单切换不适用于过渡、不透明度和可见性