ThreeSixty使用文档

ThreeSixty 是一个基于 jQuery 的插件，用于实现商品或物品的 360 度旋转展示效果。以下是 ThreeSixty 的使用文档：

1. 引入 ThreeSixty 插件

在 HTML 文件中引入 jQuery 和 ThreeSixty 插件：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="path/to/jquery.three-sixty.min.js"></script>

2. HTML 结构

在 HTML 中创建一个容器元素，用于展示 360 度旋转的物品：

<div class="threesixty-container">
  <img src="path/to/img/1.jpg" alt="" data-index="0">
  <img src="path/to/img/2.jpg" alt="" data-index="1">
  <img src="path/to/img/3.jpg" alt="" data-index="2">
  <!-- 其他图片 -->
</div>

在每张图片上添加 `data-index` 属性，表示该图片的索引值，从 0 开始递增。

3. 初始化 ThreeSixty

在 JavaScript 中初始化 ThreeSixty 插件：

$('.threesixty-container').ThreeSixty({
  dragDirection: 'horizontal', // 拖动方向，可选值：horizontal（水平）、vertical（垂直）
  useKeys: true, // 是否支持键盘控制左右旋转，默认为 true
  draggable: true, // 是否允许用户通过鼠标拖动进行旋转，默认为 true
  onReady: function() {
    // 360 度旋转效果初始化完成后的回调函数
  }
});

4. 方法和事件

ThreeSixty 提供了一些方法和事件，可以帮助你控制旋转效果：

- `nextFrame()`：旋转到下一帧。
- `prevFrame()`：旋转到上一帧。
- `gotoFrame(index)`：旋转到指定的帧，`index` 为图片的索引值。
- `play()`：连续旋转，用于自动播放。
- `stop()`：停止连续旋转。
- `destroy()`：销毁 ThreeSixty 实例，释放资源。

同时，ThreeSixty 也提供了一些事件，可以在不同的情况下触发：

- `ready`：360 度旋转效果初始化完成后触发。
- `dragStart`：开始拖动时触发。
- `dragEnd`：拖动结束时触发。
- `frameChanged`：旋转到新的帧时触发。

示例代码：

const threesixty = $('.threesixty-container').ThreeSixty({
  dragDirection: 'horizontal',
  useKeys: true,
  draggable: true,
  onReady: function() {
    console.log('360 度旋转效果初始化完成！');
  }
});

threesixty.play(); // 自动播放

$('.btn-prev').on('click', function() {
  threesixty.prevFrame(); // 上一帧
});

$('.btn-next').on('click', function() {
  threesixty.nextFrame(); // 下一帧
});

$('.btn-goto').on('click', function() {
  threesixty.gotoFrame(5); // 跳转到第 6 张图片
});

threesixty.on('dragStart', function() {
  console.log('开始拖动！');
});

threesixty.on('dragEnd', function() {
  console.log('拖动结束！');
});

threesixty.on('frameChanged', function() {
  console.log('旋转到新的帧了！');
});

以上就是 ThreeSixty 的基本使用方法和相关方法、事件介绍。希望能对你有所帮助！