如何使用鼠標前後移動圖像滑塊？

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代碼可以綁定鼠標按下和鼠標鬆開的方法來計算的方向（也可以計算出步長）

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

然後可以調用移動方法執行滑動動畫

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

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

請參閱我的jsffid le http://jsfiddle.net/pBGGH/1/

當然，您應該檢查ul元素的邊界以防止滾動到很多。