使用 jquery 插件 SpriteSpin 如何在单击按钮时使图像旋转到某个帧？

问题描述

当使用 sprite spin 插件单击按钮时，我试图让我的图像旋转到某个帧。

这是我正在使用的插件文档 -

http://spritespin.ginie.eu/samples/#/misc-slider

我没有看到内置函数，所以我试图以编程方式操作范围滑块来导航我想要显示的正确图像。

<script src="https://code.jquery.com/jquery-3.3.1.min.js" type='text/javascript'></script>
<script src="https://unpkg.com/spritespin@4.0.11/release/spritespin.js" type="text/javascript"></script>

<div class="spritespin"></div>
<input class="spritespin-slider" type="range">

<button>Click Me</button>

这里是 JS -

$(function() {
    $('.spritespin').spritespin({
source: SpriteSpin.sourceArray('/sandBox/sprite/img/gem{frame}.jpg',{ frame: [1,7],digits: 1 }),width: 480,height: 327,sense: 1,animate: false,plugins: [
      '360'
    ],onFrame: function(e,data) {
       $('.spritespin-slider').val(data.frame)
    },onInit: function(e,data) {
       $('.spritespin-slider')
        .attr("min",0)
        .attr("max",data.source.length - 1)
        .attr("value",0)
        .on("input",function(e) {
           SpriteSpin.updateFrame(data,e.target.value);
        })
    }
  });
});

此时图像随着范围滑块旋转，一切正常。我尝试添加一个点击功能并更新它所做的范围值，但图像根本不旋转和/或更新。当我检查范围输入时，我看到值正在更新，但我猜我需要使用 SpriteSpin.updateFrame 但不知道该怎么做。

这里是我的JS点击函数来更新范围-

var btn = document.querySelector("button");
var slider = document.querySelector("input[type='range']");

btn.addEventListener("click",function(){
    slider.value = 3;
});

我总共有 7 张图片，我正在尝试让图片在点击时旋转到第 3 帧。

解决方法

我找到了答案，他们确实提供了 stopFrame 的功能。

frame:0,// Start frame
stopFrame: 3,// End frame