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

Question

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

我使用 jQuery 开发了一个 slider ，用于显示图像总数中的 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

使用变量来跟踪您的 Action ，并为边界设置条件以隐藏箭头:

就像这样:

    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/