如何讓jCarousel在最後一張圖片上停下來然後重定向到新頁面？

Question

我爲使用下一個按鈕的幻燈片顯示使用了jCarousel插件，我對jQuery非常陌生，並且想知道如何在查看最後一個圖像後如何按下下一個按鈕，它將重定向到另一個web頁。

現在我的代碼是...

<div data-jcarousel="true" data-wrap="circular" class="jcarousel"> 
    <ul> 
     <li><img src="images/1.png" height="400" alt=""></li> 
     <li><img src="images/2.png" width="600" height="400" alt=""></li> 
     <li><img src="images/3.png" width="600" height="400" alt=""></li> 
     <li><img src="images/4.png" width="600" height="400" alt=""></li> 
    </ul> 
</div> 

併爲下一個按鈕，這是... ...

<a data-jcarousel-control="true" data-target="-=1" href="#" class="jcarousel-control-prev">&lsaquo;</a> 

我到底會動態地創建列表和添加值從我的數據庫中，所以這段代碼只是爲了測試，當我可以理清它時，我就很好。

Answer 1

基本步驟：

1. 確定如果你在最後一張幻燈片使用的jCarousel事件
2. 如果是這樣，改變「下一步」按鈕，一個真正的鏈接 或
3. 隱藏下一個按鈕並顯示以前隱藏的鏈接按鈕，樣式相同。

這裏的2

$('.jcarousel') 

    .on('jcarousel:animateend', function(event, carousel) { 

     var last = carousel._last, 
      lastIndex = carousel._items.index(last), 
      total = carousel._items.size(); 

     if (lastIndex == (total - 1)) { 
      // The end 
      $('.jcarousel-control-next') 
       .attr('href', 'http://google.com') // point it somewhere good 
       .jcarouselControl('destroy'); // tell jCarousel to stop caring 
     } 
    }); 

工作示例這裏的一個例子：http://jsfiddle.net/r4GaP/1/