实用的产品图片360度旋转jQuery插件

tikslus360是一款基于HTML5 canvas的非常实用的产品图片360度旋转jQuery插件。该图片360度旋转插件可以将一系列不同角度的图片组成一个序列俩通过鼠标或自动连续播放，完成产品的预览效果。它通过点击拖拽还能有局部放大镜的效果。

使用该插件需要注意以下几点要求：

• 图片的命名必须是数字递增的方式，如：1.png，2.png，3.png等等。
• 这些图片要放置在一个文件夹中，文件夹的路径要在插件中指定。
• 要使图片自动旋转，可以为链接添加autorotate class。

使用方法

使用该360度旋转插件需要引入jQuery，tikslus360.js和tikslus360.css文件。

<link href="/css/tikslus360.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/tikslus360.min.js"></script>                
              

HTML结构

使用一个带ID的<div>做容器。要使图片自动旋转，可以添加一个<a>元素，并为它设置class 为autorotate。

<div id="view360">
  <a href="#" class="autorotate">Auto rotate</a>
</div>              
              

初始化插件

在页面加载完毕之后，可以通过下面的方法来初始化该360度旋转插件。

$(document).ready(function(){
  $("#view360").tikslus360({
    imageDir:'images',
    imageCount:36,
    imageExt:'jpg',
    canvasID:'canvas1',
    canvasWidth:640,
    canvasHeight:480
  });
});                
              

注意，在初始化插件的时候，必须提供下面的参数：

• imageDir
• imageCount
• imageExt
• canvasID
• canvasWidth
• canvasHeight

配置参数