Question

我一直在尝试重新创建与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']();
}

Answer 1

我认为你可以使用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;
}

JQuery循环插件 - 可变/调整高度

1 个答案: