javascript - 如何防止图像 slider 滚动太多？

Question

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

它已经可以工作了，但问题是当它到达末尾时，它会一直滚动。这是我的 JSfiddle .

有什么想法吗？

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);
});

Answer 1

与其编写自定义 javascript 代码，我建议使用 jQuery cycle2 插件，这将使您的生活更轻松。

http://jquery.malsup.com/cycle2/