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

Question

我正在尝试在一个非常基本的滑块中控制导航（从网上的简单示例中修补）。

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

我的相关代码如下：

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>

我可以想到不同的解决方法，但这是我努力解决的解决方案，感谢您的帮助！

jsfiddle： http : //jsfiddle.net/o31ksujt/3/

Answer 1

您可以在动画末尾添加控件。

在您的代码中还会出现一个错误，在您的click函数中，您验证$(this).hasClass('final') ，但相对于标签a ，则必须指定$('#slider ul li:first-child') 。

可以采取以下解决方案。

1. 建立新功能

   函数verifyControlButton（）{if（$（'＃slider ul li：first-child'）。hasClass（“ final”））{$（'a.control_next'）。hide（）; } else {$（'a.control_next'）。show（）; };

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

   //向左移动（prev）函数moveLeft（）{$（'＃slider ul'）。animate（{左：+ slideWidth}，700，function（）{$（'＃slider ul li：last-child'） .prependTo（'＃slider ul'）; $（'＃slider ul'）。css（'left'，''）; verifyControlButton（）;}）; }; //向右移动函数（下一个）function moveRight（）{$（'＃slider ul'）。animate（{left：-slideWidth}，700，function（）{$（'＃slider ul li：first-child'） .appendTo（'＃slider ul'）; $（'＃slider ul'）。css（'left'，''）; verifyControlButton（）;}）; };

3. 点击控件调用简单的方法。

   //在click $（'a.control_prev'）。click（function（）{moveLeft（）;}）;上调用函数

   $（'a.control_next'）。click（function（）{moveRight（）;}）;

http://codepen.io/anon/pen/gbaoxK