Question

我试图创建一个滑块，使用递增/递减来移动，然后隐藏或显示按钮，具体取决于行中的最大图像数。它使用div中的div，隐藏的溢出应移动直到达到最大数量的图像，这是应该隐藏箭头以便人不能只是继续进入溢出创建的空白区域。但是，隐藏/显示不起作用，此人可以继续递增，因为即使在达到最大图像数量后箭头仍然可见。

当他们点击相应的数字时，如何让左箭头和右箭头隐藏？

编辑：我知道.css搞砸了，我只想先让箭头隐藏/显示，谢谢

var pressCounter = 0;
    var maxImgCounter = $('.carousel-image').length; // gain the max amount of images
    var maxSlide = maxImgCounter - 4;// - the amount of images visible on the screen so it does notshow white space

    if ( pressCounter < maxSlide){
        $('#right').show();
    }else{
        $('#right').hide();
    }
    if (pressCounter > 0){
        $('#left').show();
    }else{
        $('#left').hide();
    }

    /* Left arrow */
    $('#left').click(function(){
        $( '.slide' ).css({
            "position": "relative",
            "right": -280 * pressCounter
        });
        pressCounter--;
        return pressCounter; 
    });
    /* Right arrow */
     $('#right').click(function(){
         $( '.slide' ).css({
            "position": "relative",
            "right": 280 * pressCounter
         }); 
         pressCounter++;
         return pressCounter;
         });

Answer 1

   if ( pressCounter < maxSlide){
        $('#right').show();
    }else{
        $('#right').hide();
    }
    if (pressCounter > 0){
        $('#left').show();
    }else{
        $('#left').hide();
    }

考虑当值小于maxslide且presscounter大于零时会发生什么。实际上，这种情况总是如你所记录的那样真实，所以如果每次都发出声明 - 一个接着一个接一个。结果是您的左箭头和右箭头将始终显示 - 允许用户继续点击最后一张幻灯片。

使用递增/递减的jQuery图像滑块

1 个答案: