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

JQuery滑块导航行为

2 个答案: