Question

我试图在滑块上使用鼠标事件，用户向左拖动它将转到上一个，当向右拖动它将转到下一个。

这是我到目前为止所尝试的

$('#main-div').mousedown(function () {
   $('#slider ul').animate({
            left: 0
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
});

对此有什么想法吗？

Answer 1

尝试此操作以确定移动方向，然后您可以执行动画。

HTML结构可能是

<div id="main-div">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

并在javascript代码中，您可以绑定mousedown和mouseup方法来计算方向（也可以计算步长）

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

然后你可以调用move方法来执行滑动动画

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

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

请参阅我的jsffidle http://jsfiddle.net/pBGGH/1/

当然你应该检查ul元素的边界以防止滚动到很多。

如何使用鼠标移动下一个或上一个图像滑块？

1 个答案: