Javascript 如何防止图像滑块滚动过多？

我正在尝试创建一个滑块，其功能之一是能够通过鼠标事件移动到下一个和上一个

它已经开始工作了，但问题是当它到达末尾时，它会一直滚动。这是我的名片

有什么想法吗

var sliding,
    dir, 
    startClientX = 0,
    prevClientX = 0,
    $mainDiv = $('#main-div');

function move(dir, step) {
   var $ul = $mainDiv.find('.slider'),
       liWidth = $ul.find('div').width();

   $ul.animate({
      left: '+=' + (dir * liWidth)
   }, 200);
}

$mainDiv.mousedown(function (event) {
    sliding = true;
    startClientX = event.clientX;
    return false;
}).mouseup(function (event) {
    var step = event.clientX - startClientX, 
        dir = step > 0 ? 1 : -1;

    step = Math.abs(step);

    move(dir, step);
});

---

我建议不要编写自定义javascript代码，而是使用jQuery cycle2插件，这将使您的生活更加轻松

您需要检查滑块是否向左移动

var sliding,
    dir, 
    startClientX = 0,
    prevClientX = 0,
    $mainDiv = $('#main-div');

function move(dir, step) {
   var $ul = $mainDiv.find('.slider'),
       liWidth = $ul.find('div').width();
   var childCount = $(".slider div").length;
    if (((childCount - 1) * liWidth + getLeftPos()) <= 0) {
        return false;
    }
   $ul.animate({
      left: '+=' + (dir * liWidth)
   }, 200);
}

function getLeftPos() {
    var childPos = $(".slider").offset();
    var parentPos = $(".slider").parent().offset();
    return (childPos.left - parentPos.left);
}
$mainDiv.mousedown(function (event) {
    sliding = true;
    startClientX = event.clientX;
    return false;
}).mouseup(function (event) {
    var step = event.clientX - startClientX, 
        dir = step > 0 ? 1 : -1;

    step = Math.abs(step);

    move(dir, step);
});

var滑动，
局长，
startClientX=0，
prevClientX=0，
$mainDiv=$（“#mainDiv”）；
功能移动（直接，步进）{
var$ul=$mainDiv.find（'.slider'），
liWidth=$ul.find（'div'）.width（）；
var childCount=$（“.slider div”）.length；
如果（（（childCount-1）*liWidth+getLeftPos（））0-1:-1；
步骤=数学abs（步骤）；
移动（dir，step）；
});

我认为，这将作为一条评论发布，而不是answer@H你说得对！但我认为如果我把它作为一个答案发布，对其他人也会有帮助，因为评论很多次都没有被注意到。OP focus在这里很重要。有时，他们会问javascript ajax问题，但我们用javascript回答，而不提供jquery。因为这是很平常的事情。也许，OP想开发一个滑块来做出贡献。你是说太多还是太快？因为你给了

左：'+='+（dir*liWidth）

，。例如，我只有3个DIV，当到达第3个DIV时，它仍然会滚动显示空白。是的，滚动太多了。甚至没有更多的图像显示你可以看到我的答案嗯。。当它到达终点时，它不再转到上一个。当它到达终点时，它必须先转到第一个？当它到达终点时，它必须启用以转到上一个。