0

http://www.brianrea.com/Progress-drawingsで使用されているサイクルプラグインに似たものを再作成しようとしています。

私は基本的にページネーションを必要とし、スムーズなアニメーションで、画像の高さに基づいてコンテナのサイズを変更/高さを調整する必要があります。幅は静的です。

プラグインのドキュメントを調べてみましたが、あまり具体的ではなく、この機能に関するデモ（私が見つけたもの）はありません。

誰かが私を正しい方向に向けることができますか？

私は現時点で次のようなものを持っています：

$('#feature').cycle({ 
    fx:     'scrollHorz', 
    prev:   '#previous', 
    next:   '#next',
    width:   660,
    after:   onAfter, 
    timeout: 0 
});

function onAfter(curr, next, opts) {
    var index = opts.currSlide;
    $('#previous')[index == 0 ? 'hide' : 'show']();
    $('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
}
4

1 に答える 1

3

私はあなたがbeforeコールバック関数と少しのcss-transition魔法でそれをすることができると思います：

http://jsfiddle.net/vPJCv/2/

HTML

<a href="#" id="prev">&larr;</a>
<a href="#" id="next">&rarr;</a>

<div id="slideshow">
 <img src="http://flickholdr.com/500/200/sea,sun/1">
 <img src="http://flickholdr.com/500/400/sea,sun/2">
 <img src="http://flickholdr.com/500/500/sea,sun/3">
 <img src="http://flickholdr.com/500/300/sea,sun/4">
 <img src="http://flickholdr.com/500/400/sea,sun/5">
</div>​

JS

$(document).ready(function(){

    $('#slideshow').cycle({
        before : function(currSlideElement, nextSlideElement){
          $('#slideshow').css('height', $(nextSlideElement).height()+'px');
        },
        timeout : 0,
        prev : $('a#prev'),
        next : $('a#next')
    });

});

CSS

#slideshow{
  border-bottom: 2px solid #000;
  padding: 10px;
  -webkit-transition: all .2s ease;
     -moz-transition: all .2s ease;
          transition: all .2s ease;
}​
于 2012-07-13T14:11:14.083 に答える