在 x 轴上拖动图像时如何执行 jQuery 函数？

Question

我试图让我的图像轮播可拖动，所以我从 jQuery UI 添加了draggable 组件并检测用户是向左还是向右拖动。可悲的是，这已经破坏了我不再起作用的旧按钮控件。之后，我添加了一个 if-elseif 语句，它应该执行向右或向左的幻灯片。我做错了什么？

$(document).ready(function () {
var slide = function (dir) {
    if (!$('#gallery_wrapper').is(':animated')) {
        var indent = parseInt($('#gallery_wrapper').css('margin-left')) - ($('.image_content').outerWidth() * dir);
        $('#gallery_wrapper').animate({
            'margin-left': indent
        }, {
            queue: false,
            duration: 500
        });
    }
};

$('.left').click(function () {
    slide(-1);
});
$('.right').click(function () {
    slide(1);
});

$(".image").draggable({
    axis: "x",
    start: function (event, ui) {
        this.previousPosition = ui.position;
    },
    drag: function (event, ui) {
        var direction = (this.previousPosition.left > ui.position.left) ? 'left' : 'right';
        if (direction == 'left') {
            slide(-1);
        } else if (direction == 'right') {
            slide(1);
        };

    });

});

这里是fiddle。

也许我应该使用 Dragdealer……

Answer 1

代码片段（JS、CSS、HTML）：

$(window).on('load',function() {
//SLIDE----------------------------------------
  var slide = function(direction, distance){
    if (!$('#gallery_wrapper').is(':animated')) {
      var indent = parseInt($('#gallery_wrapper').css('margin-left')) - ($('.image div').outerWidth() * direction) - distance; //'distance' re-corrects for the distance-correction in $('.image').draggable({stop})

      $('#gallery_wrapper').animate({
        'margin-left': indent
      },{
        queue: false,
        duration: 500
      });
    }
  };

//SLIDE-HANDLERS-------------------------------
  $('.left').click(function() {slide(-1,0);}); //direction, distance
  $('.right').click(function() {slide(1,0);}); //direction, distance
  $('.image').draggable({
    axis: 'x',
    start: function(e, ui) {
      this.previousPosition = ui.position;
    },
    stop: function(e, ui) {
      $(this).css('left','0'); //reset image's position after drag

      var distance = ui.position.left - this.previousPosition.left;
      //only slide if there is a next or previous image to slide to
      if (!(($(this).hasClass('first')&&distance>=0) || ($(this).hasClass('last')&&distance<0))) {
        $('#gallery_wrapper').css('margin-left','+='+distance); //correct for image's drag distance
        slide((distance<0)?1:-1, distance); //direction, distance
      }
    }
  });
});

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#gallery_wrapper {
  margin: 0;
  padding: 0;
  width: 400%;
  /* 100 x Anzahl der Slides */
  height: 100%;
  overflow: scroll;
  direction: rtl;
  vertical-align: middle;
}

.image {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 25%;
  /* 100 : Anzahl der Slides */
  float: left;
}
.image div {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.image img {
  margin: 0;
  padding: 0;
  height: 100%;
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
}
.image svg {
  margin: 0;
  padding: 0;
  height: 100%;
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
}

.overlay {
  bottom: 0px;
  position: fixed;
  background-color: green;
  font-size: 20;
  height: 50px;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}
.overlay button {
  background-color: yellow;
  font-size: 20;
  height: 50px;
  text-align: center;
  vertical-align: middle;
}

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

<div id="gallery_wrapper">
  <div class="image first active">
    <div><img src="http://placekitten.com/g/1000/1000" alt="Slideshow Image 2" style="background-color: green;" /></div>
  </div>
  <div class="image">
    <div style="background-color:gray;"><img src="http://placekitten.com/g/1200/1000" alt="Slideshow Image 2" /></div>
  </div>
  <div class="image">
    <div><img src="http://placekitten.com/g/1000/900" alt="Slideshow Image 3" style="background-color: blue;" /></div>
  </div>
  <div class="image last">
    <div><img src="http://placekitten.com/g/1000/1100" alt="Slideshow Image 4" /></div>
  </div>
</div>

<div class="overlay">
  <button class="left">Left</button>
  <button class="right">Right</button>
</div>

（小提琴：http://jsfiddle.net/o35Ldxke/19/）

代码中的注释解释了它是如何工作的。

---

除了 JS 代码的更改之外，我还对您的 HTML（和 CSS）进行了一些更改：

• '.image_content' 类已删除，我改用 '.image div'（也在 CSS 中）
• style="width:100%;" 已在 <img> 中删除，我将其移至 CSS
• 你的第一个 '.image' div 有两个类标签，我将所有内容都移到了一个标签中

所以你的基本图像元素块现在看起来像这样：

<div class="image">
    <div><img src="http://placekitten.com/g/1000/900" alt="Slideshow Image 1" /></div>
</div>