jquery - 没有插件的jQuery精灵动画切换

Question

这里我目前正在使用 ascii 字符进行类别切换。但我想把它变成一个精灵，就像这个：

问题是，如果不下载外部插件，我找不到简单的解决方案，而且我不知道如何检测字形（第一张或最后一张幻灯片）处于哪个状态，因为第一次点击我想要它从第一张到最后一张幻灯片，并在第二次点击时，关闭类别时 - 从最后一张到第一张

Answer 1

尝试这个

JS：

var timer;
var position=0;
var delay = 100;
var block = document.getElementById('image');

var moveBackground = function(){
    position = position - 20;
    if(position>100){
       position=0; 
    }
    block.style.backgroundPosition = position+"px 0px";
    mouseOver();
};

var mouseOver = function(){
   timer = setTimeout(moveBackground,delay);
};

var mouseOut = function(){
   clearTimeout(timer);
}

block.onmouseover= mouseOver;
block.onmouseout= mouseOut ;

CSS：

 .test {
    width:20px;
    height:20px;
    background:url(http://i.stack.imgur.com/vUWnE.png) no-repeat 0 0;
  }

我从这里复制了解决方案

小提琴