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