使jQuery圖像滑塊停在最後的圖像，並添加下一個和上一級按鈕

Question

我有以下例子，通過每個LI，如果你懸停圖像會暫停和繼續當你鼠標，但這是儘可能我已經得到。

我希望當它到達最後一個LI時停止，並且還想讓我添加的wth類「next」和「prev」的2個鏈接，所以如果單擊將移動到next或prev圖像。當然，如果在第一個圖像設置一個類prev像隱藏，如果在最後一個圖像設置下一個按鈕隱藏，所以不能使用，但這是盡我所能。

$(function() { 
 
    var timer; 
 
     lis = $(".productImage"); 
 
    
 
    function showNext() {  
 
    var active = lis.filter(".active").removeClass("active"); 
 
    var next = active.next(); 
 
    if (next.length===0) { 
 
     next = lis.eq(0); 
 
    } 
 
    next.addClass("active");  
 
    } 
 
    
 
    function showPrev() {  
 
    var active = lis.filter(".active").removeClass("active"); 
 
    var prev = active.prev(); 
 
    if (prev.length===0) { 
 
     prev = lis.eq(0); 
 
    } 
 
    prev.addClass("active");  
 
    } 
 

 
    function playGallery() { 
 
    stopGallery(); 
 
    timer = window.setInterval(showNext, 2500); 
 
    } 
 

 
    function stopGallery() { 
 
    if (timer) window.clearTimeout(timer); 
 
    } 
 
    
 
    // move to next image 
 
    $('.galleryNext').on('click', function(event){ 
 
    stopGallery(); 
 
    showNext(); 
 
    }); 
 

 
    // move to previous image 
 
    $('.galleryPrev').on('click', function(event){ 
 
    stopGallery(); 
 
    showPrev(); 
 
    }); 
 
    
 
    // reset slider timer if thumbnail changed 
 
    $('.thumbnail-list li a').on('click', function(event){ 
 
    stopGallery(); 
 
    playGallery(); 
 
    }); 
 
    
 
    // pause image slider if mouse is hovering gallery main image 
 
    $(".featured-image-list") 
 
    .on("mouseleave", playGallery) 
 
    .on("mouseenter", stopGallery); 
 

 
    playGallery(); 
 
    
 
});

.productImage { 
 
    display : none; 
 
} 
 

 
.productImage.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="featured-image-list"> 
 
    <li class="productImage active">1</li> 
 
    <li class="productImage">2</li> 
 
    <li class="productImage">3</li> 
 
    <li class="productImage">4</li> 
 
    <li class="productImage">5</li> 
 
</ul> 
 
<a class="galleryPrev">prev</a> 
 
<a class="galleryNext">next</a>

Answer 1

修改代碼最低限度，我想出了這一點：

JSFIDDLE

簡單地把showNext（）和showPrev（）函數中下面得到下一個和prev按鈕處理的警告，它也停止從自動進展幻燈片（我看到你的編輯是你做了什麼）：

function nextImage() { 
    stopGallery(); 
    showNext(); 
} 

function prevImage() { 
    stopGallery(); 
    showPrev(); 
} 

我會留給你想出一個解決方案。

而且你還可以通過添加下面的編輯showNext和showPrev功能：

// add to showNext() 
if (next.next().length===0) { 
    stopGallery(); 
    nextBtn.addClass("hidden"); 
} 

// add to showPrev() 
if (prev.prev().length===0) { 
    prevBtn.addClass("hidden"); 
}