jQuery Cycle2中的下一個幻燈片後的目標

我的目標是在Cycle2內的每個當前幻燈片之前和之後顯示前一張和後一張幻燈片（<img>）。我可以用前面的幻燈片來實現這個沒問題，我只是不能完全理解。jQuery 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股利。

我意識到一旦倒數第二張幻燈片到達，我將不得不使用一個條件，但現在只需要做一些工作就足夠了。

來源

2014-10-28 verism

嘗試使用'$（'。sliderNext'）。html（$（incomingSlideEl）.next（'img'）。clone（））;' – Regent 2014-10-28 09:07:23

@Regent就是這樣。謝謝。如果你想回答（也許是「爲什麼它有效」），我會很樂意接受。 – verism 2014-10-28 09:35:30

不客氣。既然它是正確的，我會很快將它作爲答案發布。 – Regent 2014-10-28 09:38:09

由於沒有克隆元素$(incomingSlideEl).clone()有任何未來元素（它甚至不是在DOM樹），也沒有你真正想要克隆原始圖像（要克隆下一個圖像），它應該是：

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

Fiddle example

這個想法是找到當前圖像的下一個圖像，並添加下一個圖像的克隆。

來源

2014-10-28 09:45:24 Regent

jQuery Cycle2中的下一個幻燈片後的目標

回答

相關問題