Question

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

我希望它在到达最后一个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>

Answer 1

最低限度地修改你的代码我已经想出了这个：

<强> JSFIDDLE

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

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"); 
}

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

1 个答案: