0

http://it.post80s.com/jquery-auto-play-jcoverflipのJcoverflip（https://github.com/NewSignature/jcoverflip）用にカスタマイズされたコードを使用しています。それは私が抱えていた問題に対処しましたが、それを実装した後、カルーセル内の画像は、jcoverflip.comのデモで見られる元のコードのようにサイズが徐々に小さくなることはありません。中央の画像の左右の2枚目、3枚目などはすべて同じサイズです。

以下はカスタマイズされたJSです。これを変更して、中心から2番目と3番目の要素のサイズを小さくすることはできますか？つまり、これらの画像に適用される「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要素の幅を毎回減らしていないようです。これは、幅を変数として使用しているのと同じままであることを意味します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 に答える