Jcoverflip自定義代碼

Question

我正在使用來自http://it.post80s.com/jquery-auto-play-jcoverflip的Jcoverflip（https://github.com/NewSignature/jcoverflip）的自定義代碼。它解決了我遇到的一個問題，但在實現它之後，我的傳送帶中的圖像不像jcoverflip.com上的演示中看到的原始代碼那樣逐漸減小。中央圖像左側和右側的第二，第三等圖像都是相同的大小。

下面是自定義的JS，我可以修改它以包含第二個，第三個元素從中心出來的尺寸減小，即添加另一個變量，名爲「otherPicTwo」，適用於這些圖像？所有其他代碼是從jcoverflip下載直接。

感謝您的幫助，我可以很好地修改代碼，但很少從頭開始編寫JS代碼。

/*The center picture has 178px in width*/ 
var centerPic = 178; 

/*Other pictures should have 118px in width*/ 
var otherPic = 118; 

//You can adjust the following position params 
var centerPos = 101; var spaceRightCenterLeft = 74; 

/* Spaces between pictures/frames */ 
var spaceOther = 118; 
jQuery(document).ready(function(){ 

    jQuery('#flip').jcoverflip({ 
     current: 2, 
     time: 600, //animation transition period 

     beforeCss: function(el, container, offset){ 
      return [ 
       $.jcoverflip.animationElement(el, { left: (container.width()/2 - (centerPos/2+otherPic) -spaceRightCenterLeft - spaceOther*offset )+'px', bottom: 0 }, { }), 
       $.jcoverflip.animationElement(el.find('img'), { opacity: 0.65, width: otherPic +'px' }, {}) 
      ]; 
      }, 

      afterCss: function(el, container, offset){ 
      return [ 
       $.jcoverflip.animationElement(el, { left: (container.width()/2 + spaceRightCenterLeft +25 + spaceOther*offset )+'px', bottom: 0 }, { }), 
       $.jcoverflip.animationElement(el.find('img'), { opacity: 0.65, width: otherPic +'px' }, {}) 
      ]; 
      }, 

      currentCss: function(el, container){ 
      return [ 
       $.jcoverflip.animationElement(el, { left: (container.width()/2 - centerPos)+'px', bottom: '-38px' }, { }), 
       $.jcoverflip.animationElement(el.find('img'), { opacity: 1.0, width: centerPic +'px' }, { }) 
      ]; 
      } 

}); 

Answer 1

它看起來像你沒有減少你的li元素的寬度每次。這意味着它和你使用寬度作爲變量otherPic一樣。

以下代碼可能對您有所幫助。

jQuery(document).ready(function(){ 
var videoreelmove = true; 
jQuery("#flip").hover(function() { videoreelmove = false; }, function() {videoreelmove = true; }); 
jQuery("#flipnav").hover(function() { videoreelmove = false; }, function() {videoreelmove = true; }); 
setInterval(function() { 
    if(videoreelmove) { 
    $('#flip').jcoverflip('next', '1', true); 
    } 
}, 5000); 

jQuery('#flip').jcoverflip({ 
    current: 2, 
    time: 600, //animation transition period 
    beforeCss: function(el, container, offset){ 
    return [ 
    $.jcoverflip.animationElement(el, { left: (container.width()/2 - 250 - 130*offset -10*offset)+'px', top: '30px' }, { }), 
    $.jcoverflip.animationElement(el.find('img'), { width: Math.max(0,130-20*offset*offset) + 'px' }, {}) 
    ]; 
    }, 
    afterCss: function(el, container, offset){ 
    return [ 
     $.jcoverflip.animationElement(el, { left: (container.width()/2 + 100 + 160*offset + 10*offset)+'px', top: '30px' }, { }), 
     $.jcoverflip.animationElement(el.find('img'), { width: Math.max(0,130-20*offset*offset) + 'px' }, {}) 
    ]; 
    }, 
    currentCss: function(el, container){ 
    /* jQuery('#flip>li.selected').removeClass('selected'); 
    el.addClass('selected');*/ 
    return [ 
     $.jcoverflip.animationElement(el, { left: (container.width()/2 - 90)+'px', bottom: 0 }, { }), 
     $.jcoverflip.animationElement(el.find('img'), { width: '180px' }, { }) 
    ]; 
    }, 
    change: function(){ $('#flip li:first').appendTo('#flip'); } 
}); 


jQuery('#scrollbar').slider({ 
    value: 50, 
    stop: function(event, ui) { 
    if(event.originalEvent) { 
     var newVal = Math.round(ui.value/25); 
     jQuery('#flip').jcoverflip('current', newVal); 
     jQuery('#scrollbar').slider('value', newVal*25); 
    } 
    } 
}); 


<!-- Navigation buttons--> 
$('.flipnext').click(function(){ 
    var i = $('#flip').jcoverflip('next'); 
    i.next(); 
}); 

$('.flipprev').click(function(){ 
    var i = $('#flip').jcoverflip('previous'); 
      i.next(); 

}); 
});