产品图片和视频是网站 merchandising 中极其重要的方面，会对在线零售商的成功产生重大影响。在很大程度上，Web 开发人员有责任帮助客户尽可能加入能提升销量的图片和图像效果。
在本文中，我将向大家介绍 Petr Vostřel 的 jQuery 插件 Reel，它允许你仅使用 CSS 和 JavaScript 创建 360 度旋转图像。
摄影部分
无论使用何种技术，创建 360 度产品图像都需要一些摄影工作。在本文中，我拍摄了金属水瓶的 36 张照片。我没有花太多时间设置镜头或确保水瓶相对于相机的位置始终不变。
在生产环境中，应对产品图像投入大量时间和精力与细心，因为它们最终将决定旋转效果的质量。
准备好 36 张图像后，我需要创建一个大型（堪称巨型）的合成图像。请记住，合成图像中图像的排列顺序很重要。从左上角开始组装合成图像，使其宽度为六列。从左侧开始第二行，并继续直到合成图像完成。你可以重新配置 Reel 以支持不同数量的图像和不同的合成组织方式。
你还需要该系列的第一帧作为图像。我想再次强调，摄影才是最困难的部分。除非使用批处理，否则准备一个真正可用的合成图像可能需要几个小时。
默认情况下，命名合成图像时应在原始图像名称后追加“-reel”。例如，若第一张图像为“product.jpg”，则合成图像应为“product-reel.jpg”。两张图像应保存在同一文件夹中。
依赖项
要充分利用 Reel，你需要多个 JavaScript 文件，包括 jQuery 1.4.x、jQuery.DisableTextSelect、jQuery-Mousewheel，当然还有 Reel 本身。
我还创建了一个额外的 JavaScript 文件，用于存放启动 Reel 所需的单行代码：
$('#image360').reel({ frames: 36, saves: false, klass: 'spinner' });这段带有 jQuery 风格的 JavaScript 代码使用了 Reel 的三个选项：“frames”告诉 Reel 合成图像中有多少帧；“saves”允许用户复制和保存产品图像；“klass”向图像添加一个 CSS 类，以便我可以添加额外的样式描述。Reel 会清除应用于图像的任何非“klass”指定的 CSS 描述。
Reel 标记结构
Reel 在标记结构方面非常灵活，意味着你可以进行大量自定义。
<!doctype html>
<html lang="en">
<head>
<title>REEL DEMONSTRATION on Ecommerce Developer</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<h1>Some Fancy Product</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit adipiscing risus. Vestibulum gravida blandit rutrum. Etiam faucibus posuere pulvinar. Vivamus condimentum semper mi, mollis molestie magna hendrerit id. Mauris velit arcu, fermentum in porta nec, suscipit in sapien. Integer vel adipiscing enim. Praesent et turpis erat, aliquet ornare augue. Pellentesque feugiat quam in nisi posuere nec viverra nulla venenatis. Aenean pulvinar metus rutrum urna rhoncus consectetur. Ut tortor magna, vestibulum quis ultricies et, dapibus.</p>
<div><img id='image360' src='img/bottle.jpg' width="600px" height="400px"/></div>
<h4>Add to cart</h4>
<h5>Use Your Mouse for a 360-Degree View</h5>
</div><!--end wrapper-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="jquery.reel-min.js"></script>
<script src="inc/jquery.disabletextselect-min.js"></script>
<script src="inc/jquery.mousewheel-min.js"></script>
<script src="js.js"></script>
</body>
</html>接下来，我添加了以下 CSS：
body {background: #5B5A5C;}
#wrapper {width: 900px; height: 600px; margin: 50px auto; padding: 20px; background: #fff; border:#000 solid 1px;}
#wrapper h1 {text-transform: uppercase; font-family: GeoSlab703 XBd BT; font-size: 3em; color:#3E3D40;}
#wrapper h4 {position: relative; top: -80px; left: 660px; text-transform: uppercase; font-family: GeoSlab703 XBd BT; font-size: 1.5em; color:#3E3D40;}
#wrapper h5 {position: relative; top: -60px; left: 150px; text-transform: uppercase; font-family: GeoSlab703 XBd BT; font-size: .75em; color:#3E3D40;}
#wrapper p {width: 250px; float: right; margin-top: 0;}
.spinner {border:#3E3D40 solid 5px;}一些故障排除
在使用 Reel 时遇到了两个问题，你可能需要留意。首先，当我对图像元素使用浮动时，它停止工作了。而且你必须非常小心处理合成图像，因为甚至不允许存在单个像素的误差。