如何使用鼠標將圖像滑塊移至下一個或上一個？

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元素的邊界以防止滾動太多。