jQuery焦点图切换简易插件制作过程全纪录_jquery

五、创建插件各个操作



1、_getSlides用于获取ul这个对象的li子标签，ul也就是这个焦点图插件
2、将除了第一个li标签，其他标签设置为隐藏
3、获取切换图片的数量，由于后面做循环是从下标0开始，做<=操作，所以减去一个1，其实这里不减也是可以的，看个人喜好
4、给li标签设置mouseenter与mouseleave的事件，分别是取消循环与继续循环
5、初始化选择按钮
6、参数auto如果为true，就激活自动切换
六、初始化选择按钮



1、动态添加按钮ul标签，赋上一个自定义class，将子标签li加上
2、将第一个按钮加上选中样式
3、给li标签加上click、mouseenter与mouseleave的事件，click事件绑定切换操作
4、把分页按钮放到插件对象ul的后面
5、返回分页按钮中的li对象，后面有用的
七、切换图片



1、将当前的图片z-index加大，下一张图片的z-index也加大，显示下一张图，这样能做出一种渐变的效果，不加的话就会是很生硬的切换
2、选择按钮的下一个增加选中样式
3、应用jQuery的fadeOut与fadeIn做隐藏与显示的渐变特效
八、自动循环



1、判断是暂停还是继续轮播
2、如果不是暂停，就根据条件做当前页与下一个按钮的序号设置
插件还有很多问题，比如不能在一个页面绑定两个不同的对象，还有巨大的修改空间。
通过这次的修改，自己有了一个可以控制的焦点图切换插件，虽然还有很多问题但可以一步一步解决。以后嵌入到自己的项目中，修改起来也方便很多。
demo：http://demo.jb51.net/js/2014/jsilde/
下载： http://www.gxlcms.com/jiaoben/210405.html