Question

如何根据第一个和最后一个

左右隐藏导航

我使用jQuery开发了一个滑块，可以显示总图像数量中的3个图像。

函数moveRight（）和moveLeft（），在单击导航链接时显示一组3个图像。

现在我想知道如何根据第一张和最后一张图片隐藏navLeft和navright。

代码在这里： - Fiddle

<script>
        var currentImage = 3;
        var numImages = 0;

        jQuery('.gallery-li').each(function () {
            numImages++;
            if (numImages <= 3) {
                jQuery('.navRight').hide();
                jQuery('.navLeft').hide();
            } else {
                jQuery('.navRight').show();
            }
        });

        jQuery('a.navLeft').click(function () {
            moveLeft();
        });

        jQuery('a.navRight').click(function () {
            moveRight();
        });

    function moveRight() {
     jQuery(".gallery-li").animate({left: "-=380px",}, "slow" );
     jQuery('.navLeft').css('display' , 'block');
    }

    function moveLeft() {
        jQuery(".gallery-li").animate({left: "+=380px",}, "slow" );
    }

</script>

gallery-li中的图片是动态的

非常感谢任何帮助

Answer 1

使用变量来跟踪您的移动并为边框创建条件以隐藏箭头：

就像这样：

    var currentImage = 3;
    var numImages = 0;
    var shift = 0;
    var numberOfImagesShiftedByClick = 3;
    var numberOfImagesDisplayed = 5;

    jQuery('.gallery-li').each(function () {
        numImages++;
        if (numImages <= 3) {
            jQuery('.navRight').hide();
            jQuery('.navLeft').hide();
        } else
            $('.navRight').show();
    });

    jQuery('a.navLeft').click(function () {
        moveLeft();
    });

    jQuery('a.navRight').click(function () {
        moveRight();
    });

function moveRight() {
 jQuery(".gallery-li").animate({left: "-=380px",}, "slow" );
 jQuery('.navLeft').css('display' , 'block');
    shift++;
    if (1 + shift*numberOfImagesShiftedByClick + numberOfImagesDisplayed > numImages + 1)
        $("a.navRight").hide();
     $("a.navLeft").show();
}

function moveLeft() {
    jQuery(".gallery-li").animate({left: "+=380px",}, "slow" );
    shift --;
    if (shift == 0)
        $("a.navLeft").hide();
     $("a.navRight").show();
}

这是一个向您展示此代码的jsfiddle：http://jsfiddle.net/Tfy8h/24/

Answer 2

这样的事情会起作用（http://jsfiddle.net/QG9m4）：

    var currentImage = 0;
    var numImages = jQuery('.gallery-li').length;

    jQuery('a.navLeft').click(function () {
        moveLeft();
    });

    jQuery('a.navRight').click(function () {
        moveRight();
    });

function updateNav() {
  var hideLeft = currentImage == 0;
  var hideRight = currentImage == numImages;

 if( hideLeft )
   jQuery('.navLeft').hide();
 else
   jQuery('.navLeft').show();

 if( hideRight )
   jQuery('.navRight').hide();
 else
   jQuery('.navRight').show();        
}

function moveRight() {
 if( currentImage >= numImages )
   return;        
 currentImage += 3;
 jQuery(".gallery-li").animate({left: "-=380px",}, "slow" );
 jQuery('.navLeft').css('display' , 'block');
 updateNav();
}

function moveLeft() {
    if( currentImage < 1 )
      return;
    currentImage -= 3;
    jQuery(".gallery-li").animate({left: "+=380px",}, "slow" );
    updateNav();
}

Answer 3

试试这个：

var current = 3;
var numImages = $('.gallery-li').length;

jQuery('a.navLeft').click(function () {
    move();
});

jQuery('a.navRight').click(function () {
    move("right");
});
function move(d){
    if(d == "right"){
        current += 3;
        $(".gallery-li").animate({left: "-=380px",}, "slow" );
    }else{
        current -= 3;
        $(".gallery-li").animate({left: "+=380px",}, "slow" );
    }
    $(".navRight, .navLeft").show();
    if(current == 0) $(".navLeft").hide();
    if(current >=  numImages) $(".navRight").hide();
}

http://jsfiddle.net/Tfy8h/22/

如何根据第一个和最后一个li左右隐藏导航

3 个答案: