<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://spritespin.ginie.eu/spritespin.js"></script>
</head>
<body>
<div id='spritespin'></div>
<button id='prev'>Prev</button>
<button id='toggle'>Toggle</button>
<button id='reverse'>Reverse</button>
<button id='next'>Next</button>
<script type="text/javascript">
var frames = SpriteSpin.sourceArray('cake-{frame}.jpg', {
frame: [1, 4],
digits: 3
});
var spin = $('#spritespin');
var api;
spin.spritespin({
source: [ //保存所有图片路径的数组
"cake-1.png",
"cake-2.png",
"cake-3.png",
"cake-4.png"
],
width: 480,
sense: -1,
height: 327
});
api = spin.spritespin("api");
$('#prev').click(function(){
api.stopAnimation();
api.prevFrame();
});
$('#next').click(function(){
api.stopAnimation();
api.nextFrame();
});
$('#toggle').click(function(){
api.toggleAnimation();
});
$('#reverse').click(function(){
api.data.reverse = !api.data.reverse;
});
</script>
</body>
</html>
