如何在JavaScript中使用精灵表？

嗨，我已经有了这个代码：

var refreshIntervalId;
var myImages = [
    "walking1.jpg",
    "walking2.jpg",
    "walking3.jpg",
    "walking4.jpg",
    "walking5.jpg",

];
var counter = 0;  


function switchImage() {
    $('#myImage').attr('src', myImages[counter]);
    counter += 1;

    if (counter == Number($("#counter").val())) {
        counter = 0;
        clearInterval(refreshIntervalId);



    }
}
$(document).ready(function() {
    $("#animationBtn").click(function(){
        refreshIntervalId = setInterval(switchImage, 50);
    }); 
});

---

但是现在我想用一张图片来播放一张精灵片，这可能吗？或者我必须更改整个代码，是吗？有人能帮我吗？

spritesheet是一个工作表，它基本上是一个包含一组图像的图像文件，表示一个（或多个）动画序列

:

加载图像一次，然后更改背景位置，在spritesheet中显示其他图像

---

选中此项，这是一个在线工具（我最喜欢的工具），用于获取精灵表中各个图像的背景位置。

您可能需要了解其图标是如何显示的。这实际上是一个精灵工作表的使用。是的，显示精灵工作表的不同部分与显示不同的图像是非常不同的。这确实是可能的，试试看。我已经在Adobe flash中制作了一个动画，并且制作了所有这些图像，所以我认为在精灵表中收集它们会更容易，但你们知道我如何使用Adobe flash制作的动画，就像我可以更改上面问题中的图像一样？因此，我不想显示一幅图像，但如果我选择1（例如+1），则必须显示整个动画-这是一个整洁的工具！：）有时只为像素偏移量和尺寸启动图形程序会很麻烦。@user1671639谢谢您的回复，如果我使用工具，我会得到以下代码：.sprite{background:url（'imgs/walkingman.png'）不重复0；背景大小：1684px 801px；宽度：0；高度：0；}如何将其与代码结合使用，使其具有相同的功能function@user2852398正如我在例子中提到的，将css添加到各自的元素中。@user1671639实际上我不明白这是我想要的。看，我已经在Adobe flash中制作了一个动画，并制作了所有这些图像，所以我认为在sprite表中收集它们会更容易，但你们知道我如何以同样的方式使用Adobe flash制作的动画吗更改我上面问题中的图像？因此，我不想显示一个图像，但如果我选择1，则必须显示整个动画example@user2852398我找不到。但我知道动画是你的首要任务。检查一下这把由Simurai设计的小提琴

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}