0

我正在使用来自http://it.post80s.com/jquery-auto-play-jcoverflip的 Jcoverflip ( https://github.com/NewSignature/jcoverflip )的自定义代码。它解决了我遇到的一个问题，但是在实现它之后，我的轮播中的图像并没有像 jcoverflip.com 演示中看到的原始代码那样逐渐减小大小。中心图像左右的第 2、3 等图像大小相同。

下面是定制的 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' }, { } )
            ];
          }  

});
4

1 回答 1

2

看起来您并没有li每次都减小元素的宽度。这意味着它保持不变，就像您使用 width 作为变量一样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();

});
});
于 2012-09-29T11:55:48.517 回答