以幻灯片方式拖动图片

Question

我已经搜索了一段时间，但无法找到答案。 我的网站上有一个幻灯片类型div，您可以使用滚动条查看图像。

<div id="container" style="overflow-x: scroll; overflow-y: hidden; width: 700px; height: 300px;">
    <div class="content" style="float: left; width: 700px; height: 300px; background: url('images/1.png')"></div>
    <div class="content" style="float: left; width: 700px; height: 300px; background: url('images/2.png')"></div>
    <div class="content" style="float: left; width: 700px; height: 300px; background: url('images/3.png')"></div>
</div>

只是让你明白了...... 我想做的是让用户能够在图片上使用鼠标并滑动div，而不是使用滚动条。我假设这将使用jquery拖放。说实话，我真的不知道从哪里开始，有什么想法？

Answer 1

我认为THIS正是您所寻找的：）

一个jQuery项目，可让您使用鼠标或手机轻扫它

Answer 2

这个插件对你来说应该是最完美的。

Photo Desk

http://tympanus.net/codrops/2010/07/01/interactive-photo-desk/

快乐编码：）

Answer 3

您可以使用JQuery的“Dragger”功能，它允许用户拖动元素。问题是，它与Touch不兼容，但有一些黑客可以使用触摸屏，例如“jQuery UI Touch Punch”。这是完美的，除非你的整个屏幕充满了“Touch Punch”影响的元素，在这种情况下，你将无法在手机中向上和向下滚动。

如果您没有在整个页面上填充使用Touch Punch效果的元素，那么这是最适合您的解决方案。试一试。

http://touchpunch.furf.com/

一个示例拖动器功能，它接受监视列表类中的ul内的所有元素，并允许使用鼠标向左或向右拖动，或者在手机中触摸它。

$(function() {
  var slides = $('#something').children().length;
  var slideWidth = $('#something').width();
  var min = 0;
  var max = -((slides - 1) * slideWidth);

  $("#something").width(slides * slideWidth).draggable({
    axis: 'x',
    drag: function(event, ui) {
      if (ui.position.left > min) ui.position.left = min;
      if (ui.position.left < max) ui.position.left = max;
    }
  });


});