如何使用jQuery在iPhone Safari上创建一个图片滑块？

Question

我想为电子商务网站的iPhone版本创建一个产品图片查看器，并使其类似于Photos应用程序。

理想情况下，您可以滑动图像在产品图片库中前后移动。

所有这些都将在移动Safari中完成。

我尝试了jqTouch，但它似乎不支持这个想法（它支持滑动，但似乎没有明显的方法将滑动链接到拖动图像）。

有任何插件或实现方案的建议吗？谢谢！

- Ben Crouse

---

如果你是专门为iPhone构建应用程序，那么你可能想要考虑使用CSS动画。在这种情况下，你可以获得硬件加速，从而获得最佳性能。 - bpapa

你找到解决方案了吗，Ben？记住，在Stack Overflow上回答自己的问题是完全可以的。 :) - Jan Aagaard

Answer 1

我需要相同的功能，解决方案是使用cycle和swipe插件：

“＃gallery”是包含所有img标签的容器。

$(function() {
 $('#gallery').cycle({
  fx: 'scrollHorz',
  timeout: 0,
  next: '',
  prev: '',
  speed: 300,
  nowrap: 0
 });
});
$(function() {
 $('#gallery').swipe({
  swipeLeft: function() { $('#gallery').cycle("next"); },
  swipeRight: function() { $('#gallery').cycle("prev") },
  threshold: {
   x: 15,
   y: 99999
  },
  preventDefaultEvents: false
 });
});

它能工作，但不像照片库那样完美，因为图像在更改之前不能拖动到50％的宽度。就像crmunro的解决方案一样，但基于jQuery和插件。

- Andris Silis

Answer 2

不确定你是否解决了这个问题，但一个 iWebkit 用户已经创建了 http://worldofsai.com/photos_flick.html - 也许你可以以此为基础？

- crmunro

---

该相册的原始代码和教程可在以下网址找到：http://mydailyphoto.com/blog/iphone-safari-flick-navigation - Jared Updike

Answer 3

你可以查看this的例子。在你的iPhone上用Safari打开它))) 你可以旋转、移动和缩放图片

- Morion

---

谢谢，但我真的想使用jQuery，并且我不需要那种灵活性。我只想让图片向左或向右滑动。 - Ben Crouse

Answer 4

Qtouch在7月份进行了重要更新。现在完整的源代码包中包含了视频嵌入和可滑动图像库的演示。

您可以在以下网址下载r148: http://code.google.com/p/jqextensions/downloads/list

它运行非常良好。

- sfarinel