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>
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 element
var $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做创建操作
