javascript - 在 jQuery Cycle2 中定位下一张幻灯片

Question

我的目标是让前一张和后一张幻灯片 ( <img> ) 出现在 Cycle2 中每张当前幻灯片之前和之后。我可以用上一张幻灯片来实现这一点，没有问题，我只是无法完全理解后面的幻灯片。

我的 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 树中)，而且您实际上也不想克隆原始图像(您想克隆 下一个图像)，它应该是:

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

Fiddle example

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