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