换一个思路解决js问题

换一个思路解决js问题

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

2014-11-12

今天在做前端的时候遇到一个小问题,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,然后循环把他们的图片都设为原样,这样写就非常麻烦,而且效率肯定特别低,感觉自己走了弯路,就好好想了一下。

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