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(); 

}); 
});