换一个思路解决js问题

今天在做前端的时候遇到一个小问题，6个li分别代表6个按钮，每个按钮图标有两个图片作为两种状态，大概就是这个样 [...]

今天在做前端的时候遇到一个小问题，6个li分别代表6个按钮，每个按钮图标有两个图片作为两种状态，大概就是这个样子，由于整个幻灯使用了slider插件，所以，默认情况会有一个

,代表滑动到当前按钮，整个是自动播放的，每次这个 “on”滑动到一个li，这个li就需要切换图片，那么问题来了，刚开始我的思路是这样的，首先选择含有on的li，改变他的css的背景图片，图片的名称我就命名为nav1.png，nav2.png。然后获取这个li在索引值，用index()方法，那么对应的图片就是index() + 1.png。最后使用setInterval让函数一直运行，改变容易，再还原回去就麻烦了，没有想到一个好的方法，只能找到所有不含有on的li，然后循环把他们的图片都设为原样，这样写就非常麻烦，而且效率肯定特别低，感觉自己走了弯路，就好好想了一下。

\n\t

\n\t突然想到，可以这样写，先贴源码。

\n\t

\n\t当然对应的html也要改动

\n\t

\n\t首先默认状态下img会遮挡住background，显示的就是白色的图片，然后用js选取含有on的li，把他的img设置成display none。这样img就不显示了，自然露出了背景图片，当然再这之前先把所有的图片都恢复，这样的操作就很简单而且有效的完成了前端的要求，因为平时在做前端的时候一定要多想想，有时候换一个思路，整个开发就会非常简单。
\n\t稍后我们会把这个案例更新到精品案例里面，到时候大家可以看一下。

\n\t

\n"