Javascript jQuery-在滑块中显示/隐藏上一个/下一个按钮

我试图用一个非常基本的滑块控制导航（从简单的在线示例拼凑而成）。

我的目标是在到达最后一张幻灯片时隐藏“下一步”按钮，反之，在第一张幻灯片时隐藏“上一步”按钮，这可以通过捕获“活动”（显示当前幻灯片）类然后隐藏它来实现吗

我的相关代码如下：

jQuery(document).ready(function ($) {

//set vars for slider size
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');
//move left function (prev)
function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 700, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};
//move right function (next)
function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 700, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};
// call functions on click 
$('a.control_prev').click(function () {
    moveLeft();
});

$('a.control_next').click(function () {
    if ($(this).hasClass('final')){
    $('a.control_next').hide();
    }
    else{
        moveRight();
    }
});

}); 

和HTML滑块列表：

<div id="slider">
 <a href="#" class="control_next">></a>
 <a href="#" class="control_prev"><</a>
   <ul>
     <li><img src="sme1.png" height="550"/></li>
     <li><img src="sme2.png" height="550"/></li>
     <li><img src="sme3.png" height="550"/></li>
     <li class="final"><img src="sme4.png" height="550"/></li>
   </ul>  
</div>

可以在动画末尾添加控件

在您的代码中也存在一个错误，在您的单击函数中您验证
$（this）.hasClass（'final'）
，但与标记
a
相关，您必须指定
$（'#slider ul li:first child'）

解决办法如下

创建新功能

函数verifyControlButton（）{
if（$（'#li:first child'）.hasClass（“final”））{
$（'a.control_next'）.hide（）；
}否则{
$（'a.control_next'）.show（）；
}
};

在移动操作中设置对新方法的调用：

//向左移动功能（上一个）
函数moveLeft（）{
$（'#滑块ul'）。设置动画({
左：+slideWidth
}，700，函数（）{
$（“#slider ul li:last child”）.prependTo（“#slider ul”）；
$（'#滑块ul'）.css（'左'，''）；
verifyControlButton（）；
});
};
//右移功能（下一步）
函数moveRight（）{
$（'#滑块ul'）。设置动画({
左：-滑动方向
}，700，函数（）{
$（“#slider ul li:first child”）。附加到（“#slider ul”）；
$（'#滑块ul'）.css（'左'，''）；
verifyControlButton（）；
});
};

单击controlcallsimple方法

//单击调用函数
$（'a.control\u prev'）。单击（函数（）{
左移（）；
});

$（'a.control\u next'）。单击（函数（）{
moveRight（）；
});

我已经包括了所有jQuery和相关HTML，thanksI刚刚创建了一个JSFIDLE，但无法让它做任何事情。你能在这里包装一个代码片段或者一个复制这个问题的JSFIDLE吗？你忘了你的css也添加了这个，否则我们不能在JSFIDLE中使用它。或者只是为usI制作一个工作JSFIDLE。我已经添加了一个工作JSFIDLE的链接。谢谢，这对于“最终”幻灯片（幻灯片4）来说确实有效，所以我可以在第一张幻灯片中使用相同的逻辑。