JQuery滑塊導航行爲

Question

我有一個非常好的工作滑塊，但我需要稍微改變導航工作方式的行爲。

在第一張幻燈片上，我希望只有右側/下一個選項可用，第二/第三/第四個等有左右兩個，或者下一個和上一個可用。一旦你到達結束幻燈片，下一個或右側選項被隱藏，因此它不會循環。

這是我的腳本。

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

    $('#checkbox').change(function(){ 
    setInterval(function() { 
     moveRight(); 
    }, 3000); 
    }); 

    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'); 

    function moveLeft() { 
     $('#slider ul').animate({ 
      left: + slideWidth 
     }, 200, function() { 
      $('#slider ul li:last-child').prependTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    function moveRight() { 
     $('#slider ul').animate({ 
      left: - slideWidth 
     }, 200, function() { 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    $('a.control_prev').click(function() { 
     moveLeft(); 
    }); 

    $('a.control_next').click(function() { 
     moveRight(); 
    }); 

}）;

Answer 1

在moveLeft和moveRight函數中，您可以檢查$（'＃slider ul'）。attr（「left」）屬性。如果它是0，則等於（$（'＃slider ul'）。attr（「width」） - （$（'＃slider ul li'）。attr（「width」）））在最後。

Answer 2

function moveLeft() { 
    if($('#slider ul').position().left > 0){ 
    $('#slider ul').animate({ 
     left: + slideWidth 
    }, 200, function() { 
     $('#slider ul li:last-child').prependTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }); 
    } 
}; 
function moveRight() { 
    if($('#slider ul').position().left < (sliderUlWidth - slideWidth)){ 
    $('#slider ul').animate({ 
     left: + slideWidth 
    }, 200, function() { 
     $('#slider ul li:last-child').prependTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }); 
    } 
};