在JavaScript中更改图像的位置

我希望这是对这个问题的正确描述。如果没有，请原谅，我是新来的，对JavaScript还不熟悉

我正在使用一个名为jQuery的插件创建椅子的转盘动画。我有它的设置，所以它加载一个围绕其轴旋转的椅子精灵长条

Spritespin网站显示了我可以更改对象符号的哪些参数以使其正常工作。这就是它看起来的样子：

// initialize the spritespin
$(".spritespin").spritespin({
    width       : 640,
    height      : 640,
    frames      : 24,
    resolutionX : 15360,
    resolutionY : 640,
    image       : "turntable/images/LC-01_strip_black.jpg",
    (some more code..)
});

如您所见，我所要做的就是创建一个由24幅640 x 640的图像组成的条带并链接到它

问题是我想添加一些功能。我想在旋转椅的一侧有一套颜色样本，让用户选择不同的颜色

我的想法是将所有7个精灵条放入一个巨大的图像（15360 x 4480），并根据单击的样例移动其y位置。但我不知道如何编写代码，也不知道这是否是最明智的方法

以下是我的样例当前的设置方式：

<div id="colourSwatches">
    <a href="" id="swatch01"><div id="swatchBlack"></div></a>
    <a href="" id="swatch02"><div id="swatchBlue"></div></a>
    <a href="" id="swatch03"><div id="swatchBrown"></div></a>
    <a href="" id="swatch04"><div id="swatchPink"></div></a>
    <a href="" id="swatch05"><div id="swatchRed"></div></a>
    <a href="" id="swatch06"><div id="swatchTurquoise"></div></a>
    <a href="" id="swatch07"><div id="swatchYellow"></div></a>
</div>

---

我希望这不是太复杂，希望有人能帮助我。

我查看了spritespin.js文件，没有看到任何函数可以更改偏移量x/Y或它使用的图像。但是，您似乎可以通过更改再次调用div上的spritespin函数，例如：

$('a').click(function() { 
    var swatch = $(this).attr('id');
    if(swatch == "black") {
     $(".spritespin").spritespin({
       width       : 640,
       height      : 640,
       frames      : 24,
       resolutionX : 15360,
       resolutionY : 640,
       image       : "turntable/images/LC-01_strip_black.jpg",
       (some more code..)
     });
    } 
});

显然，有不同的方法可以继续更改

图像：

选项，例如将其设置为通过if语句的变量（减少文件的大小），使用类似以下内容的变量

image : "turntable/images/LC-01_strip_" + swatch + ".jpg"

---

或者使用AJAX或JSON读取文件名。不幸的是，我不知道这会如何影响DOM，或者点击链接100万次是否会破坏浏览器。

我目前没有办法修改OffsetX和OffsetY默认选项，除非您第一次创建插件，这意味着您可能无法在一张图像中包含7条带。非常感谢，我会尝试一下！呜呜呜，真管用！！再次感谢！这就是它看起来的样子。。