频道导航

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

2018-12-30 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了jQuery焦点图切换简易插件制作过程全纪录，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

首页经常是需要一个焦点图切换的效果，最近做的项目也正好需要，所以在网上搜索，后面查到了一个半成品的插件，这里我自己修改了一下。

js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js，前面一个是我改写的，第二个是原作者的文件。下图是效果图：

一、静态效果

标签都是用img来显示图片的，现在得换成background做背景图，这样就不会出现横向滚动条啦。

2.最外面套个slide_wrap用来做限制里面图片的绝对定位

3.ul中的class原先我是在插件初始化的时候添加上去的，现在我预先就加上了，显示效果比后面添加要好一点，大家可以在改写插件的时候做修改

1、slide_wrap与slide中的height属性可以根据实际情况修改

2、pagination是图中的按钮样式，用来控制显示第几张图，也是绝对定位left与top可以根据实际情况修改

3、样式中的各个颜色也可以根据想要的效果做个性化修改

4、上面的样式写的有点啰嗦，在嵌入自己的项目中，可以适当精简

二、调用方式

1、将ul设置成焦点图插件

2、下面的各个操作都将围绕着ul转

三、jQuery插件通用格式

　　 //中间插件代码

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

五、创建插件各个操作

@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,opts.speed);
}
}

1、_getSlides用于获取ul这个对象的li子标签，ul也就是这个焦点图插件

2、将除了第一个li标签，其他标签设置为隐藏

3、获取切换图片的数量，由于后面做循环是从下标0开始，做<=操作，所以减去一个1，其实这里不减也是可以的，看个人喜好

4、给li标签设置mouseenter与mouseleave的事件，分别是取消循环与继续循环

5、初始化选择按钮

6、参数auto如果为true，就激活自动切换

六、初始化选择按钮

图片数量" */ function _pagination($node,size) { var $ul = $('

' + '' + '

'); }

$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',function() {
pause = true;//暂停轮播
}).delegate('li',function() {
pause = false;
});
$node.after($ul);
return $pages;
}

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做隐藏与显示的渐变特效

八、自动循环

= size){ next = 0; }

_fadeinout($slides,next);