Question

我试图创建一个滑块，其中一个功能是可以通过鼠标事件移动到下一个和上一个。

它已经在工作但问题是当它到达终点时，它会继续滚动。这是我的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/

Answer 2

<强> Demo

您需要检查滑块是否到达;

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

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

2 个答案: