使jQuery图像滑块停在最后一个图像并添加next和prev按钮

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.

我有以下示例,它通过每个LI,如果你悬停图像将暂停和鼠标停止时继续,但这是我所拥有的。

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.

我希望它在到达最后一个LI时停止,并且想要使用“next”和“prev”类添加2个链接,因此如果点击将移动到next或prev image。当然如果在第一个图像上设置一个上类似隐藏的类,如果在最后一个图像设置下一个按钮隐藏所以不能使用,但这是我所拥有的。

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

1 个解决方案

#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):

只需在下面的函数中放置showNext()和showPrev(),就可以使用下一个和上一个按钮来处理警告,它也会阻止幻灯片自动进行(我在编辑中看到你所做的事情):

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:

您还可以通过添加以下内容来编辑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"); 
}

#1