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

Question

I'm trying to use a mouse event on a slider, what the user drags to left it will go to previous, and when drag to right it will go to next.

This is what I have tried so far

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

Any idea on this?

Answer 1

try this in order to determine the direction of movement, and then you can execute animate.

HTML structure could be

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

and by in javascript code you can bind mousedown and mouseup methods to calculate direction (also you can calculate step size)

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

then you can call move method to execute sliding animation

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

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

see my jsffidle http://jsfiddle.net/pBGGH/1/

Of course you should check boundaries of the ul element to prevent scroll to much.