Javascript slider ，如何为滚动分配最大值以使其不会溢出？

Question

我想为滚动设置一个最小值和最大值，这样滚动就不可能超出 slider 内部的内容。现在，代码允许无限滚动。我对 Javascript 还很陌生，但我已经在大学编码多年。

JSFiddle

JavaScript

$('#vcards').width(function(){
var width = 0;                
$('.vcard').each(function(){
    width += $(this).outerWidth(true);
});
return width;
}());
$('#next').on('click',function(){
$('#vcards').animate({left : "-=170"});
});
$('#prev').on('click',function(){
$('#vcards').animate({left : "+=170"});
});

CSS

#slider{
width:500px;
overflow:hidden;
position:relative;
border:1px solid black;
height:225px;
padding:10px;
}  

.vcard{
width:150px;
margin: 0 10px;
height:200px;
float:left;
border:1px;
text-align:center;
font-weight:bold;
background-color:green;
}  

#vcards{
position:absolute;
top:0;
left:-170px;
}        

HTML

 <div id="slider">
 <div id="vcards">
    <div class="vcard">1</div>
    <div class="vcard">2</div>
    <div class="vcard">3</div>
    <div class="vcard">4</div>
    <div class="vcard">5</div>
 </div>
 </div>
<div id="next">Next</div>
<div id="prev">Prev</div>

Answer 1

你可以试试这个:

$('#next').on('click',function(){
    var v_offset = $('#vcards').offset();
    var v_width = $('#vcards').width();
    var left = v_offset.left;
    var total = v_width - Math.abs(left);
    var cont_w = $('#slider').width();
    if(total>=cont_w)
    $('#vcards').animate({left : "-=170"});
    });

$('#prev').on('click',function(){
    var v_offset = $('#vcards').offset();
    var left = v_offset.left;
    if(left<=0)
    $('#vcards').animate({left : "+=170"});
    });