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

首页经常是需要一个焦点图切换的效果，最近做的项目也正好需要，所以在网上搜索，后面查到了一个半成品的插件，这里我自己修改了一下。
js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js，前面一个是我改写的，第二个是原作者的文件。下图是效果图：

一、静态效果

<div class="slide_wrap"> <ul id="slides2" class="slide"><li style="background:url（"images/01.jpg"） no-repeat center top"><a href="http://www.jb51.net/" target="_blank">pwstrick1</a></li><li style="background:url（"images/02.jpg"） no-repeat center top"><a href="http://www.jb51.net/" target="_blank">pwstrick2</a></li><li style="background:url（"images/03.jpg"） no-repeat center top"><a href="http://www.jb51.net/" target="_blank">pwstrick3</a></li><li style="background:url（"images/04.jpg"） no-repeat center top"><a href="http://www.jb51.net/" target="_blank">pwstrick4</a></li> </ul></div>

1.现在比较流行宽屏的焦点图切换，以前标签都是用img来显示图片的，现在得换成background做背景图，这样就不会出现横向滚动条啦。2.最外面套个slide_wrap用来做限制里面图片的绝对定位
3.ul中的class原先我是在插件初始化的时候添加上去的，现在我预先就加上了，显示效果比后面添加要好一点，大家可以在改写插件的时候做修改

.slide_wrap {width:100%;height:400px;position:relative}.slide_wrap .slide { display:block; width:100%; height:400px; list-style:none; padding:0; margin:0; position:relative;}.slide_wrap .slide li { display:block; width:100%; height:100%; list-style:none; padding:0; margin:0; position:absolute;}.slide_wrap .slide li a { display:block; width:100%; height:100%; text-indent:-9999px;}.slide_wrap .pagination { display:block; list-style:none; position:absolute; left:50%; top:340px; z-index:9900;padding:5px 15px 5px 0; margin:0}.slide_wrap .pagination li { display:block; list-style:none; width:10px; height:10px; float:left;margin-left:15px; border-radius:5px; background:#FFF }.slide_wrap .pagination li a { display:block; width:100%; height:100%; padding:0; margin:0; text-indent:-9999px;outline:0}.slide_wrap .pagination li.current { background:#0092CE}

1、slide_wrap与slide中的height属性可以根据实际情况修改
2、pagination是图中的按钮样式，用来控制显示第几张图，也是绝对定位left与top可以根据实际情况修改
3、样式中的各个颜色也可以根据想要的效果做个性化修改
4、上面的样式写的有点啰嗦，在嵌入自己的项目中，可以适当精简
二、调用方式

<script type="text/javascript"> $（"#slides2"）.jslide（）;</script>

1、将ul设置成焦点图插件
2、下面的各个操作都将围绕着ul转
三、jQuery插件通用格式

;（function （factory） { "use strict"; // Register as an AMD module, compatible with script loaders like RequireJS. if （typeof define === "function" && define.amd） {define（["jquery"], factory）; } else {factory（jQuery）; }}（function （$, undefined） { "use strict";   //中间插件代码 $.fn.jslide = function （method） {return _init.apply（this, arguments）; };}））;

1、第一个分号是为了防止在与其他代码压缩到一起的时候合在一行中，这样会出现语法错误。例如var i=0（function（factory）{......}（..）;
2、"use strict"是开启严格模式，使Javascript解释器可以用"严格"的语法来解析代码，以帮助开发人员发现错误
3、如果使用了requirejs模块载入框架，define（["jquery"], factory）这句就是让插件支持AMD规范
4、function （$, undefined）这里面的undefined是为了防止在引入其他js文件的时候，使用被重写了的undefined
5、_init是用于初始化效果
四、插件初始化

  var defaults = {speed : 3000,pageCss : "pagination",auto: true //自动切换 };var nowImage = 0;//现在是哪张图片 var pause = false;//暂停 var autoMethod;  /*** @method private* @name _init* @description Initializes plugin* @param opts [object] "Initialization options"*/ function _init（opts） {opts = $.extend（{}, defaults, opts || {}）;// Apply to each elementvar $items = $（this）;for （var i = 0, count = $items.length; i < count; i++） { _build（$items.eq（i）, opts）;}return $items; }

1、defaults是暴露出来的自定义参数，这里我就写了三个自动切换的速度、选择按钮样式、是否自动化
2、三个全局参数，nowImage是当前显示图片的序号、pause是控制图片是切换还是暂停，autoMethod是定时函数的编号
3、_init中有合并自定义参数，调用_build做创建操作
五、创建插件各个操作

/*** @method private* @name _getSlides* @description 获取幻灯片对象* @param $node [jQuery object] "目标对象"*/ function _getSlides（$node） {return $node.children（"li"）; }/*** @method private* @name _build* @description Builds each instance* @param $node [jQuery object] "目标对象"* @param opts [object] "插件参数"*/ function _build（$node, opts） {var $slides = _getSlides（$node）;$slides.eq（0）.siblings（"li"）.css（{"display":"none"}）;var numpic = $slides.size（） - 1;$node.delegate（"li", "mouseenter", function（） { pause = true;//暂停轮播 clearInterval（autoMethod）;}）.delegate（"li", "mouseleave", function（） { pause = false; autoMethod = setInterval（function（） {_auto（$slides, $pages, opts）; }, opts.speed）;}）;//console.log（autoMethod）var $pages = _pagination（$node, opts, numpic）;if（opts.auto） { autoMethod = setInterval（function（） {_auto（$slides, $pages, opts）; }, opts.speed）;} }

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

   /*** @method private* @name _pagination* @description 初始化选择按钮* @param $node [jQuery object] "目标对象"* @param opts [Object] "参数"* @param size [int] "图片数量"*/function _pagination（$node, opts, size） {var $ul = $（"<ul>", {"class": opts.pageCss}）;for（var i = 0; i <= size; i++）{ $ul.append（"<li>" + "<a href="javascript:void（0）">" + （i+1） + "</a>" + "</li>"）;}$ul.children（":first"）.addClass（"current"）;//给第一个按钮选中样式var $pages = $ul.children（"li"）;$ul.delegate（"li", "click", function（） {//绑定click事件 var changenow = $（this）.index（）; _changePage（$pages, $node, changenow）;}）.delegate（"li", "mouseenter", function（） { pause = true;//暂停轮播}）.delegate（"li", "mouseleave", function（） { pause = false;}）;$node.after（$ul）;return $pages;}

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

   /*** @method private* @name _change* @description 幻灯片显示与影藏* @param $slides [jQuery object] "图片对象"* @param $pages [jQuery object] "按钮对象"* @param next [int] "要显示的下一个序号"*/function _fadeinout（$slides, $pages, next）{$slides.eq（nowImage）.css（"z-index","2"）;$slides.eq（next）.css（{"z-index":"1"}）.show（）;$pages.eq（next）.addClass（"current"）.siblings（）.removeClass（"current"）;$slides.eq（nowImage）.fadeOut（400, function（）{ $slides.eq（next）.fadeIn（500）;}）; }

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

   /*** @method private* @name _auto* @description 自动轮播* @param $slides [jQuery object] "图片对象"* @param $pages [jQuery object] "按钮对象"* @param opts [Object] "参数"*/function _auto（$slides, $pages, opts）{var next = nowImage + 1;var size = $slides.size（） - 1;if（！pause） { if（nowImage >= size）{next = 0; }_fadeinout（$slides, $pages, next）;if（nowImage < size）{nowImage += 1; }else {nowImage = 0; }}else { clearInterval（autoMethod）;//暂停的时候就取消自动切换}}

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