nivo-slider js代碼無法更改過渡效果？

Question

我正在嘗試修改Nivo-slider JavaScript代碼以使用內置到滑塊中的效果之一。我一直在玩這個代碼很長一段時間沒有成功。下面的代碼最底部有一些 過渡效果選項。當我嘗試選擇一個時，它只能從第三張幻燈片開始工作。這意味着第一張幻燈片具有「淡入淡出」效果，第二張幻燈片具有「無效」，第三張幻燈片具有「slideLeft」效果，然後從第四張幻燈片開始，無論我嘗試在整個主板上應用的效果是否適用於剩餘幻燈片。

我想知道是否有人能幫助我理解我做錯了什麼？我只是想選擇一個過渡效果，並將其應用到我的所有幻燈片...

下面是JavaScript代碼：

 // Generate random effect 
     if(settings.effect === 'random'){ 
      anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade', 
      'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse'); 
      currentEffect = anims[Math.floor(Math.random()*(anims.length + 1))]; 
      if(currentEffect === undefined) { currentEffect = 'fade'; } 
     } 

     // Run random effect from specified set (eg: effect:'fold,fade') 
     if(settings.effect.indexOf(',') !== -1){ 
      anims = settings.effect.split(','); 
      currentEffect = anims[Math.floor(Math.random()*(anims.length))]; 
      if(currentEffect === undefined) { currentEffect = 'fade'; } 
     } 

     // Custom transition as defined by "data-transition" attribute 
     if(vars.currentImage.attr('data-transition')){ 
      currentEffect = vars.currentImage.attr('data-transition'); 
     } 

     // Run effects 
     vars.running = false; 
     var timeBuff = 0, 
      i = 0, 
      slices = '', 
      firstSlice = '', 
      totalBoxes = '', 
      boxes = ''; 

     if(currentEffect === 'sliceDown' || currentEffect === 'sliceDownRight' || currentEffect === 'sliceDownLeft'){ 
      createSlices(slider, settings, vars); 
      timeBuff = 0; 
      i = 0; 
      slices = $('.nivo-slice', slider); 
      if(currentEffect === 'sliceDownLeft') { slices = $('.nivo-slice', slider)._reverse(); } 

      slices.each(function(){ 
       var slice = $(this); 
       slice.css({ 'top': '0px' }); 
       if(i === settings.slices-1){ 
        setTimeout(function(){ 
         slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); 
        }, (100 + timeBuff)); 
       } else { 
        setTimeout(function(){ 
         slice.animate({opacity:'1.0' }, settings.animSpeed); 
        }, (100 + timeBuff)); 
       } 
       timeBuff += 50; 
       i++; 
      }); 
     } else if(currentEffect === 'sliceUp' || currentEffect === 'sliceUpRight' || currentEffect === 'sliceUpLeft'){ 
      createSlices(slider, settings, vars); 
      timeBuff = 0; 
      i = 0; 
      slices = $('.nivo-slice', slider); 
      if(currentEffect === 'sliceUpLeft') { slices = $('.nivo-slice', slider)._reverse(); } 

      slices.each(function(){ 
       var slice = $(this); 
       slice.css({ 'bottom': '0px' }); 
       if(i === settings.slices-1){ 
        setTimeout(function(){ 
         slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); 
        }, (100 + timeBuff)); 
       } else { 
        setTimeout(function(){ 
         slice.animate({opacity:'1.0' }, settings.animSpeed); 
        }, (100 + timeBuff)); 
       } 
       timeBuff += 50; 
       i++; 
      }); 
     } else if(currentEffect === 'sliceUpDown' || currentEffect === 'sliceUpDownRight' || currentEffect === 'sliceUpDownLeft'){ 
      createSlices(slider, settings, vars); 
      timeBuff = 0; 
      i = 0; 
      var v = 0; 
      slices = $('.nivo-slice', slider); 
      if(currentEffect === 'sliceUpDownLeft') { slices = $('.nivo-slice', slider)._reverse(); } 

      slices.each(function(){ 
       var slice = $(this); 
       if(i === 0){ 
        slice.css('top','0px'); 
        i++; 
       } else { 
        slice.css('bottom','0px'); 
        i = 0; 
       } 

       if(v === settings.slices-1){ 
        setTimeout(function(){ 
         slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); 
        }, (100 + timeBuff)); 
       } else { 
        setTimeout(function(){ 
         slice.animate({opacity:'1.0' }, settings.animSpeed); 
        }, (100 + timeBuff)); 
       } 
       timeBuff += 50; 
       v++; 
      }); 
     } else if(currentEffect === 'fold'){ 
      createSlices(slider, settings, vars); 
      timeBuff = 0; 
      i = 0; 

      $('.nivo-slice', slider).each(function(){ 
       var slice = $(this); 
       var origWidth = slice.width(); 
       slice.css({ top:'0px', width:'0px' }); 
       if(i === settings.slices-1){ 
        setTimeout(function(){ 
         slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); 
        }, (100 + timeBuff)); 
       } else { 
        setTimeout(function(){ 
         slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed); 
        }, (100 + timeBuff)); 
       } 
       timeBuff += 50; 
       i++; 
      }); 
     } else if(currentEffect === 'fade'){ 
      createSlices(slider, settings, vars); 

      firstSlice = $('.nivo-slice:first', slider); 
      firstSlice.css({ 
       'width': slider.width() + 'px' 
      }); 

      firstSlice.animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); }); 
     } else if(currentEffect === 'slideInRight'){ 
      createSlices(slider, settings, vars); 

      firstSlice = $('.nivo-slice:first', slider); 
      firstSlice.css({ 
       'width': '0px', 
       'opacity': '1' 
      }); 

      firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); }); 
     } else if(currentEffect === 'slideInLeft'){ 
      createSlices(slider, settings, vars); 

      firstSlice = $('.nivo-slice:first', slider); 
      firstSlice.css({ 
       'width': '0px', 
       'opacity': '1', 
       'left': '', 
       'right': '0px' 
      }); 

      firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ 
       // Reset positioning 
       firstSlice.css({ 
        'left': '0px', 
        'right': '' 
       }); 
       slider.trigger('nivo:animFinished'); 
      }); 
     } else if(currentEffect === 'boxRandom'){ 
      createBoxes(slider, settings, vars); 

      totalBoxes = settings.boxCols * settings.boxRows; 
      i = 0; 
      timeBuff = 0; 

      boxes = shuffle($('.nivo-box', slider)); 
      boxes.each(function(){ 
       var box = $(this); 
       if(i === totalBoxes-1){ 
        setTimeout(function(){ 
         box.animate({ opacity:'1' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); 
        }, (100 + timeBuff)); 
       } else { 
        setTimeout(function(){ 
         box.animate({ opacity:'1' }, settings.animSpeed); 
        }, (100 + timeBuff)); 
       } 
       timeBuff += 20; 
       i++; 
      }); 
     } else if(currentEffect === 'boxRain' || currentEffect === 'boxRainReverse' || currentEffect === 'boxRainGrow' || currentEffect === 'boxRainGrowReverse'){ 
      createBoxes(slider, settings, vars); 

      totalBoxes = settings.boxCols * settings.boxRows; 
      i = 0; 
      timeBuff = 0; 

      // Split boxes into 2D array 
      var rowIndex = 0; 
      var colIndex = 0; 
      var box2Darr = []; 
      box2Darr[rowIndex] = []; 
      boxes = $('.nivo-box', slider); 
      if(currentEffect === 'boxRainReverse' || currentEffect === 'boxRainGrowReverse'){ 
       boxes = $('.nivo-box', slider)._reverse(); 
      } 
      boxes.each(function(){ 
       box2Darr[rowIndex][colIndex] = $(this); 
       colIndex++; 
       if(colIndex === settings.boxCols){ 
        rowIndex++; 
        colIndex = 0; 
        box2Darr[rowIndex] = []; 
       } 
      }); 

      // Run animation 
      for(var cols = 0; cols < (settings.boxCols * 2); cols++){ 
       var prevCol = cols; 
       for(var rows = 0; rows < settings.boxRows; rows++){ 
        if(prevCol >= 0 && prevCol < settings.boxCols){ 
         /* Due to some weird JS bug with loop vars 
         being used in setTimeout, this is wrapped 
         with an anonymous function call */ 
         (function(row, col, time, i, totalBoxes) { 
          var box = $(box2Darr[row][col]); 
          var w = box.width(); 
          var h = box.height(); 
          if(currentEffect === 'boxRainGrow' || currentEffect === 'boxRainGrowReverse'){ 
           box.width(0).height(0); 
          } 
          if(i === totalBoxes-1){ 
           setTimeout(function(){ 
            box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3, '', function(){ slider.trigger('nivo:animFinished'); }); 
           }, (100 + time)); 
          } else { 
           setTimeout(function(){ 
            box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3); 
           }, (100 + time)); 
          } 
         })(rows, prevCol, timeBuff, i, totalBoxes); 
         i++; 
        } 
        prevCol--; 
       } 
       timeBuff += 100; 
      } 
     }   
    }; 

    // Shuffle an array 
    var shuffle = function(arr){ 
     for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i, 10), x = arr[--i], arr[i] = arr[j], arr[j] = x); 
     return arr; 
    }; 

    // For debugging 
    var trace = function(msg){ 
     if(this.console && typeof console.log !== 'undefined') { console.log(msg); } 
    }; 

    // Start/Stop 
    this.stop = function(){ 
     if(!$(element).data('nivo:vars').stop){ 
      $(element).data('nivo:vars').stop = true; 
      trace('Stop Slider'); 
     } 
    }; 

    this.start = function(){ 
     if($(element).data('nivo:vars').stop){ 
      $(element).data('nivo:vars').stop = false; 
      trace('Start Slider'); 
     } 
    }; 

    // Trigger the afterLoad callback 
    settings.afterLoad.call(this); 

    return this; 
}; 

$.fn.nivoSlider = function(options) { 
    return this.each(function(key, value){ 
     var element = $(this); 
     // Return early if this element already has a plugin instance 
     if (element.data('nivoslider')) { return element.data('nivoslider'); } 
     // Pass options to plugin constructor 
     var nivoslider = new NivoSlider(this, options); 
     // Store plugin object in this element's data 
     element.data('nivoslider', nivoslider); 
    }); 
}; 

//Default settings 
$.fn.nivoSlider.defaults = { 
    /*'sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade', 
      'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse*/ 
    effect: 'fold', 
    slices: 15, 
    boxCols: 8, 
    boxRows: 4, 
    animSpeed: 500, 
    pauseTime: 3000, 
    startSlide: 0, 
    directionNav: true, 
    controlNav: false, 
    controlNavThumbs: false, 
    pauseOnHover: true, 
    manualAdvance: false, 
    prevText: 'Prev', 
    nextText: 'Next', 
    randomStart: false, 
    beforeChange: function(){}, 
    afterChange: function(){}, 
    slideshowEnd: function(){}, 
    lastSlide: function(){}, 
    afterLoad: function(){} 
}; 

$.fn._reverse = [].reverse; 

}）（jQuery的）;

Answer 1

的影響已經設立在JS，所以你只需要改變/添加的數據轉換HTML網頁上：

img src="demo/images/demo.jpg" data-thumb="demo/images/demo.jpg" alt="" data-transition="slideInLeft"