循环jCoverflip

时间:2012-08-31 14:03:53

标签: jquery html loops

我在使用jCoverflip循环图像时遇到问题。如果有人对如何添加此功能有任何建议,我将非常感激。

1 个答案:

答案 0 :(得分:0)

@Mike你可以使用setInterval:http://jsfiddle.net/QmVFR/1 - @Oriol

jQuery( document ).ready( function(){
    jQuery( '#flip' ).jcoverflip({
      current: 2,
      beforeCss: function( el, container, offset ){
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset -10*offset )+'px', bottom: '20px' }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(20,100-20*offset*offset) + 'px' }, {} )
        ];
      },
      afterCss: function( el, container, offset ){
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset + 10*offset)+'px', bottom: '20px' }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(20,100-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 - 75 )+'px', bottom: 0 }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: '150px' }, { } )
        ];
      },
      change: function(event, ui){
        jQuery('#scrollbar').slider('value', ui.to*25);
      }
    });


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

var timer=setInterval(next,3000);

function next(){
    var $next=$('#flip>li.selected').next('li');
    if(!$next.length){$next=$('#flip>li:first-child');}
    $next.click();
}