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

我有下面的例子，它通过每个LI，如果你悬停图像将暂停，并继续当你滑鼠，但这是我所得到的

我想它停止时，它得到的最后一个李，还想使2个链接，我添加了类“下一个”和“上一个”，所以如果点击将移动到下一个或上一个图像。当然，如果在第一个图像上设置一个类在上一个像隐藏，如果在最后一个图像上设置下一个按钮隐藏，所以不能使用，但这是我所能得到的

$（函数（）{
无功定时器；
lis=$（“.productImage”）；
函数showNext（）{
var active=lis.filter（“.active”）.removeClass（“active”）；
var next=active.next（）；
if（next.length==0）{
next=lis.eq（0）；
}
next.addClass（“活动”）；
}
函数showPrev（）{
var active=lis.filter（“.active”）.removeClass（“active”）；
var prev=active.prev（）；
如果（上一个长度===0）{
上一个=lis.eq（0）；
}
上一个添加类（“活动”）；
}
函数playGallery（）{
stopGallery（）；
定时器=窗口设置间隔（showNext，2500）；
}
函数stopGallery（）{
如果（计时器）窗口。清除超时（计时器）；
}
//移动到下一个图像
$（'.galleryNext'）。在（'click'，函数（事件）{
stopGallery（）；
showNext（）；
});
//移到上一个图像
$（'.galleryPrev'）。在（'click'，函数（事件）{
stopGallery（）；
showPrev（）；
});
//如果缩略图更改，则重置滑块计时器
$（'.缩略图列表LIA'）。在（'单击'）上，函数（事件）{
stopGallery（）；
playGallery（）；
});
//如果鼠标悬停在画廊主图像上，则暂停图像滑块
$（“.featured image list”）
.on（“mouseleave”，playGallery）
.on（“mouseenter”，stopGallery）；
playGallery（）；
});
.productImage{
显示：无；
}
.productImage.active{
显示：块；
}


1
2
3
4
5

上
下一步
将代码修改到最低限度我提出了以下建议：


只需将showNext（）和showPrev（）放在下面的函数中，就可以使用next和prev按钮，警告它也会阻止幻灯片自动进行（我在您的编辑中看到了这一点）：

我会让你想出解决办法的

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

我点击“下一步”并立即禁用，猜测应该是在第一个上一个禁用时，然后单击“下一步”直到最后一个禁用。。。当点击秒数时，prev是否启用？感谢您的帮助，但认为不正常：（几乎，无论如何，默认禁用prev链接？我在这里更新了按钮位置：我可能有prev和next按钮向后？再次查看JSFIDLE。对我有效：）要默认禁用prev链接，我只需在html中添加“隐藏”类
// add to showNext()
if (next.next().length===0) {
    stopGallery();
    nextBtn.addClass("hidden");
}

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