换一个思路解决js问题

今天在做前端的时候遇到一个小问题，6个li分别代表6个按钮，每个按钮图标有两个图片作为两种状态，大概就是这个样子，由于整个幻灯使用了slider插件，所以，默认情况会有一个 <li class="on">,代表滑动到当前按钮，整个是自动播放的，每次这个 “on”滑动到一个li，这个li就需要切换图片，那么问题来了，刚开始我的思路是这样的，首先选择含有on的li，改变他的css的背景图片，图片的名称我就命名为nav1.png，nav2.png。然后获取这个li在索引值，用index()方法，那么对应的图片就是index() + 1.png。最后使用setInterval让函数一直运行，改变容易，再还原回去就麻烦了，没有想到一个好的方法，只能找到所有不含有on的li，然后循环把他们的图片都设为原样，这样写就非常麻烦，而且效率肯定特别低，感觉自己走了弯路，就好好想了一下。