Question

我的目标是在Cycle2中的每张当前幻灯片之前和之后出现之前和之后的幻灯片（<img>）。我可以通过上一张幻灯片实现这一点没问题，我只是不能完全接受。

我的HTML如下：

<section>
    <div class="sliderPrev"></div>   // Previous slide (1.jpg) goes here
    <div class="banner_images">
        <img src="1.jpg">
        <img src="2.jpg">           // Hypothetical current slide
        ...
        <img src="n.jpg">
    </div>
    <div class="sliderNext"></div>   // Next slide (3.jpg) should go here
</section>

我的jQuery：

var cycle = {

    before : function( e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag ) {
        // Works!
        $('.sliderPrev').html( $.clone( outgoingSlideEl ) );
        // Doesn't work...
        $('.sliderNext').html( $( incomingSlideEl ).clone().next('img')[0] );
    },

    run : function() {
        $('.banner_images').cycle( this.attrs )
            .on( 'cycle-before', function( e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag ) {
                cycle.before( e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag )
            })
            .on( 'cycle-after', function( e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag ) {
                cycle.after( e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag )
            });
    }

}

这是我可以获得的最接近未定义或行为错误，但.sliderNext div未填充。

我意识到，一旦达到倒数第二张幻灯片，我就必须使用条件，但现在只要有一些工作就足够了。

Answer 1

既然克隆元素$(incomingSlideEl).clone()都没有任何下一个元素（它甚至不在DOM树中），也不是你真的想要克隆原始图像（你想要克隆 next 图像），它应该是：

$('.sliderNext').html($(incomingSlideEl).next('img').clone());

Fiddle example

想法是找到当前图像的下一个图像并添加下一个图像的克隆。

在jQuery Cycle2中定位下一个幻灯片

1 个答案: