如何隐藏导航的左和右基于第一个和最后一个

how to hide navigation left and right based on first and last li

本文关键字：最后一个 第一个 何隐藏 隐藏 导航      更新时间：2023-09-26

如何根据首尾距隐藏左右导航

我已经使用jQuery开发了一个滑块来显示图像总数中的3个图像。

函数moveRight()和movelleft()，在单击导航链接时显示一组3个图像。

现在我只是我想知道如何隐藏navLeft和navright基于第一个和最后一个图像。

代码在这里:-小提琴

<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内的图片是动态的

任何帮助都是非常感谢的

使用一个变量来跟踪你的移动，并为边界设置隐藏箭头的条件:

就像这样:

    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/

这样就可以了(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();
}

试试这个:

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/

相关文章：