Javascript 查看最后一项时停止滚动-使用jQuery

我有一个动态项目列表，它有一个类似幻灯片的滚动条，当列表中的最后一个项目显示时，我不能用箭头设置滚动条的限制

你知道我在查看最后一个项目时如何停止滚动吗？此处示例：

    $('.nextArrow').click(function() {
        //Animate the images to next slide
        $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);             
    });

    $('.prevArrow').click(function() {
        var marginTopValue = $('.thumbs li:eq(0)').css('margin-top');
        //Animate the image to previous slide
        if (marginTopValue == '0px') {

        } else {
            $('.thumbs li:eq(0)').animate({"margin-top": "+=80"}, 500);
        };
    });

---

在JSFIDLE中，尝试使用以下javascript代码

        $('.thumbs').before('<span class="nextArrow arrowThumbs" id="nextArrow">Next</span>').after('<span class="prevArrow arrowThumbs" id="prevArrow">Prev</span>');
    $('.nextArrow').click(function() {
        //Animate the images to next slide
  console.log($('.thumbs').height(), $('.thumbs li:eq(0)').css('margin-top').replace("px", ""));
  if(Math.abs($('.thumbs li:eq(0)').css('margin-top').replace('px','')) <= $('.thumbs').height() + 60)
        $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);             
    });

    $('.prevArrow').click(function() {
        var marginTopValue = $('.thumbs li:eq(0)').css('margin-top');
        //Animate the image to previous slide
        if (marginTopValue == '0px') {

        } else {
            $('.thumbs li:eq(0)').animate({"margin-top": "+=80"}, 500);
        };
    });

$（'.thumbs'）。前（'Next'）。后（'Prev'）；
$（'.nextArrow'）。单击（函数（）{
//为下一张幻灯片设置图像动画
console.log（$（'.thumbs'）.height（），$（'.thumbs li:eq（0））.css（'margin-top'）.replace（'px'，''）；
如果JSFIDLE中的（Math.abs（$（'.thumbs-li:eq（0）））.css（'margin-top'）.replace（'px'，''），请尝试使用此javascript代码

        $('.thumbs').before('<span class="nextArrow arrowThumbs" id="nextArrow">Next</span>').after('<span class="prevArrow arrowThumbs" id="prevArrow">Prev</span>');
    $('.nextArrow').click(function() {
        //Animate the images to next slide
  console.log($('.thumbs').height(), $('.thumbs li:eq(0)').css('margin-top').replace("px", ""));
  if(Math.abs($('.thumbs li:eq(0)').css('margin-top').replace('px','')) <= $('.thumbs').height() + 60)
        $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);             
    });

    $('.prevArrow').click(function() {
        var marginTopValue = $('.thumbs li:eq(0)').css('margin-top');
        //Animate the image to previous slide
        if (marginTopValue == '0px') {

        } else {
            $('.thumbs li:eq(0)').animate({"margin-top": "+=80"}, 500);
        };
    });

$（'.thumbs'）。前（'Next'）。后（'Prev'）；
$（'.nextArrow'）。单击（函数（）{
//为下一张幻灯片设置图像动画
console.log（$（'.thumbs'）.height（），$（'.thumbs li:eq（0））.css（'margin-top'）.replace（'px'，''）；
if（Math.abs（$（'.thumbs li:eq（0）'））.css（'margin-top'）.replace（'px'，''）更改

到

这里！
换衣服

$('.nextArrow').click(function() {
    //Animate the images to next slide
    $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);             
});

到

这里！
这不是我做上一个/下一个滑块的方式，但作为您问题的解决方案（不完全替换），您应该测量UL的高度，并防止顶部边距偏移超过它

例如：


$（'.thumbs'）。前（'Next'）。后（'Prev'）；
var ih=$（'.thumbs li:first'）.height（）；
$（'.nextArrow'）。单击（函数（）{
var maxTopMargin=0-（$（'.thumbs'）.height（）+ih）；
var marginTopValue=parseInt（$（'.thumbs li:eq（0））.css（'margin-top'）；
//为下一张幻灯片设置图像动画
如果（marginTopValue>maxTopMargin）{
$（'.thumbs li:eq（0'）。设置动画({
“页边距顶部”：“-=”+ih
}, 500);
}
});
$（'.prevArrow'）。单击（函数（）{
var marginTopValue=parseInt（$（'.thumbs li:eq（0））.css（'margin-top'）；
//将图像设置为上一张幻灯片的动画
如果（边际现值<0）{
$（'.thumbs li:eq（0'）。设置动画({
“页边距顶部”：“+=”+ih
}, 500);
};
})；
。拇指{
显示：块；
宽度：128px；
高度：120px；
溢出：隐藏；
填充：0；
}
李先生{
宽度：128px；
显示：块；
保证金：0自动；
文本对齐：居中；
列表样式：无；
}
.大拇指李h2{
字体大小：11px；
保证金：0；
填充：0；
}
李英明{
宽度：30%；
}
.大拇指{
显示：块；
边框：1px实心#000；
填充：10px；
宽度：128px；
文本对齐：居中；
光标：指针；
}



项目1


项目2


项目3


项目4


项目5


项目6

这不是我制作上一个/下一个滑块的方式，但作为您问题的解决方案（不完全替换），您应该测量ul的高度，并防止顶部边距偏移超过它

例如：


$（'.thumbs'）。前（'Next'）。后（'Prev'）；
var ih=$（'.thumbs li:first'）.height（）；
$（'.nextArrow'）。单击（函数（）{
var maxTopMargin=0-（$（'.thumbs'）.height（）+ih）；
var marginTopValue=parseInt（$（'.thumbs li:eq（0））.css（'margin-top'）；
//为下一张幻灯片设置图像动画
如果（marginTopValue>maxTopMargin）{
$（'.thumbs li:eq（0'）。设置动画({
“页边距顶部”：“-=”+ih
}, 500);
}
});
$（'.prevArrow'）。单击（函数（）{
var marginTopValue=parseInt（$（'.thumbs li:eq（0））.css（'margin-top'）；
//将图像设置为上一张幻灯片的动画
如果（边际现值<0）{
$（'.thumbs li:eq（0'）。设置动画({
“页边距顶部”：“+=”+ih
}, 500);
};
})；
。拇指{
显示：块；
宽度：128px；
高度：120px；
溢出：隐藏；
填充：0；
}
李先生{
宽度：128px；
显示：块；
保证金：0自动；
文本对齐：居中；
列表样式：无；
}
.大拇指李h2{
字体大小：11px；
保证金：0；
填充：0；
}
李英明{
宽度：30%；
}
.大拇指{
显示：块；
边框：1px实心#000；
填充：10px；
宽度：128px；
文本对齐：居中；
光标：指针；
}



项目1


项目2


项目3


项目4


项目5


项目6

@charlietfl我只是抓住了计算逻辑：p@charlietfl我只是抓住了计算逻辑：pNo问题，很高兴我帮了忙。别忘了将答案标记为正确答案：）那么，如果您正在单击“上一步”呢？OP是否希望它在返回开始时停止？@Adjit是的，它停止是因为它首先检查marginTopValue是否为“0px”没问题，很高兴我提供了帮助。别忘了将答案标记为正确答案：）那么，如果单击“上一步”呢？OP是否希望它在返回开始时停止？@Adjit是的，它停止是因为它首先检查marginTopValue是否为“0px”