使jQuery图像滑块在最后一张图像处停止并添加下一个和上一个按钮

Question

I have the following example which goes through each LI and if you hover image will pause and the continue when you mouseout but this is as far as I have got.

I would like it to stop when it gets to the last LI and also would like to make the 2 links I added wth classes "next" and "prev" so if clicked will move to next or prev image. Of course if at first image to set a class on prev like hidden and if on last image set next button to hidden so cannot be used, however this is as far as I have got.

 $( 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

modifying your code a bare minimum I've come up with this:

JSFIDDLE

Simply placing showNext() and showPrev() within the functions below gets the next and prev buttons working with the caveat that it also stops the slides from auto progressing (and I see in your edit that's what you did):

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

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

I'll leave it up to you to come up with a solution to that.

And you can also edit your showNext and showPrev functions with the addition of the following:

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

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