使用jquery插件SpriteSpin，我如何在点击按钮时将图像旋转到某个帧

Question

当使用sprite旋转插件点击按钮时，我正试图让我的图像旋转到某一帧。

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

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帧。

Answer 1

我找到了答案，他们确实提供了stopFrame函数。

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