Jcoverflip 사용자 정의 코드

Question

Jcoverflip (https://github.com/NewSignature/jcoverflip)의 사용자 정의 코드를 http://it.post80s.com/jquery-auto-play-jcoverflip에서 사용하고 있습니다. 그것은 내가 가지고있는 문제를 해결했지만 구현 후 jaroflip.com의 데모에서 볼 수있는 원래 코드를 사용하는 것처럼 회전식 컨베이어의 이미지 크기가 점차 줄어들지 않습니다. 중앙 이미지의 왼쪽과 오른쪽의 두 번째, 세 번째 등의 이미지는 모두 같은 크기입니다.

다음은 맞춤 JS입니다.이 이미지를 수정하여 센터에서 두 번째, 세 번째 요소의 크기를 줄이면됩니다. 즉,이 이미지에 적용되는 "otherPicTwo"라는 다른 변수를 추가 할 수 있습니까? 다른 모든 코드는 jcoverflip 다운로드에서 바로 나온 것입니다.

도움을 주셔서 감사합니다. 코드를 잘 수정하지만 처음부터 JS를 작성하는 경우는 거의 없습니다. 당신이 당신의 li 요소마다의 폭을 감소하지 않은 것처럼

/*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

는 것 같습니다. 이것은 너비가 변수 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(); 

}); 
});