不带插件的jQuery sprite动画切换

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

问题是，如果不下载外部插件，我就找不到简单的解决方案，而且我也不知道如何检测图示符的状态（第一张幻灯片或最后一张幻灯片），因为第一次单击时，我希望它从第一张幻灯片转到最后一张幻灯片，第二次单击时，关闭类别-从最后一张幻灯片转到第一张幻灯片

JS:

CSS:

我从中复制了解决方案

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 ;

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