jQuery焦点图切换简单插件制作过程全记录

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

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

一、静态效应

div class=' slide _ wrap ' ul id=' slide 2 ' class=' slide ' Li style=' background : URL(' images/01 . jpg ')no-repeat center top ' a href='//www . JB 51 . net/' target=' _ blank ' pwstrick 1/a/Li style=' background 3: URL(' images/02 . jpg ')no-repeat center top ' a href='//www . JB 51 . net/' target=' _ blank '现在流行切换宽屏的对焦图。2.最外面的一组slide_wrap用于限制图片在内部的绝对位置

3.3.ul中的类最初是在插件初始化时添加的。现在我已经提前添加了，显示效果比后期添加好。您可以在重写插件时进行更改。slide _ wrap { width :100%；高度：400 px；位置：relative}。幻灯片环绕。幻灯片{ display:block宽度：100%；高度：400 px；list-style : none；划水：0；margin:0位置：相对；}.幻灯片环绕。滑动li { display:block宽度：100%；高度：100%；list-style : none；划水：0；margin:0位置：绝对；}.幻灯片环绕。滑动阿利{ display:block宽度：100%；高度：100%；text-indent :-9999 px；}.幻灯片环绕。分页{ display:blocklist-style : none；位置：绝对；左侧：50%；top:340pxz指数：9900；padd :5 px 15px 5px 0；margin:0}。幻灯片环绕。分页li { display:blocklist-style : none；宽度：10 px；height:10pxfloat:left边距-left :15 px；border-radius :5 px；背景：#FFF }。幻灯片环绕。分页阿利{ display:block宽度：100%；高度：100%；划水：0；margin:0text-indent :-9999 px；Outline:0}。幻灯片环绕。分页。当前{background: # 0092ce} 1。slide _ wrap和slide中的高度属性可以根据实际情况进行修改

2.分页是图片中的按钮样式，用于控制显示哪张图片。也是左上方的绝对定位，可以根据实际情况修改

3.风格中的每种颜色也可以根据所需的效果进行个性化

4.上面的风格有点尴尬，嵌入到自己的项目中可以适当精简

二、通话模式

脚本类型='text/javascript' $('#slides2 ')。js lide()；/script1。将ul设置为焦点图的插件

2.以下操作将围绕ul展开

Iii .jQuery插件的通用格式

；(function(factory){ ' use strict '；//注册为AMD模块，兼容RequireJS等脚本加载器。if(type of define==' function ' define . amd){ define([' jquery ']，factory)；} else { factory(jQuery)；}}(函数($，未定义){ '使用strict '；//中间插件代码$ . fn . js立德=function(method){ return _ init . apply(this，arguments)；};}));1、第一个分号是为了防止在与其他代码压缩在一行时，因此会出现语法错误。例如，var I=0(函数(工厂){ 0.} (.);

2.“使用严格”是打开严格模式，这样Javascript解释器就可以用“严格”语法解析代码，帮助开发人员发现错误

3.如果用requirejs模块加载框架，定义(['jquery']，factory)就是让插件支持AMD规范

4.函数($，undefined)这里的undefined是为了防止在引入其他js文件时使用重写的undefined

5、_init是用于初始化效果

四、插件初始化

定义变量默认值={ speed : 3000，pageCss : '分页，auto: true //自动切换};var now image=0；//现在是哪张图片var pause=false//暂停var autoMethod/* * * @方法私有* @ name _ init * @描述初始化插件* @param opts [object]"初始化选项" */function _init(opts) { opts=$ .扩展({}，默认值，opts | | { })；//应用于每个元素var $ items=$(this)；for (var i=0，count=$ items.length我数；i ) { _build($items.eq(i)，opts)；}退回$ items}1、默认值是暴露出来的自定义参数，这里我就写了三个自动切换的速度、选择按钮样式、是否自动化

2、三个全局参数，nowImage是当前显示图片的序号、暂停是控制图片是切换还是暂停，自动方法是定时函数的编号

3、_init中有合并自定义参数，调用构建(_ f)做创建操作

五、创建插件各个操作

/* * * @方法私有* @ name _ getSlides * @描述获取幻灯片对象* @ param $节点[jQuery对象]'目标对象*/function _ getSlides($ node){ return $ node。儿童('李')；}/* * * @方法私有* @ name _ build * @描述构建每个实例* @ param $节点[jQuery对象]'目标对象* @param opts [object]'插件参数*/function _build($node，opts){ var $ slides=_ getSlides($ node)；$slides.eq(0).兄弟姐妹('里').CSS({ ' display ' : ' none ' })；var numpic=$ slides。size()-1；$node.delegate('li '，' mouseenter '，function(){ pause=true；//暂停轮播clearInterval(自动方法);}).delegate('li '，' mouseleave '，function(){ pause=false；autoMethod=setInterval(function(){ _ auto($ slides，$pages，opts)；}，选择。速度)；});//控制台。log(autoMethod)var $ pages=_ pagination($ node，opts，numpic)；if(opts。auto){ autoMethod=setInterval(function(){ _ auto($ slides，$pages，opts)；}，选择。速度)；} } 1、_getSlides用于获取保险商实验所这个对象的里子标签，ul也就是这个焦点图插件

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

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

4、给里标签设置鼠标输入与老鼠叶的事件，分别是取消循环与继续循环

5、初始化选择按钮

6、参数汽车如果为没错，就激活自动切换

六、初始化选择按钮

/* * * @方法私有* @name _pagination * @description初始化选择按钮* @ param $节点[jQuery对象]'目标对象* @参数选择[对象]'参数* @param size [int]'图片数量*/function _pagination($node，opts，size) { var $ul=$('ul '，{ ' class ' : opts。页面CSS })；for(var I=0；i=尺寸；I){ $ ul。追加(' Li ' ' a href=' JavaScript : void(0)' '(I 1)'/a ' '/Li ')；} $ul.children(':first ').添加CLaSS(' current ')；//给第一个按钮选中样式var $ pages=$ ul。儿童('李')；$ul.delegate('li '，' click '，function() {//绑定点击事件var changenow=$(this).index()；_changePage($pages，$node，立即更改)；}).delegate('li '，' mouseenter '，function(){ pause=true；//暂停轮播}).delegate('li '，' mouseleave '，function(){ pause=false；});$ node。after($ ul)；返回$ pages } 1、动态添加按钮保险商实验所标签，赋上一个自定义同学们，将子标签里加上

2、将第一个按钮加上选中样式

3、给里标签加上点击、鼠标进入与老鼠叶的事件，点击事件绑定切换操作

4、把分页按钮放到插件对象保险商实验所的后面

5、返回分页按钮中的里对象，后面有用的

七、切换图片

/* * * @ method private * @ name _ change * @ description幻灯片放映和阴影隐藏* @param $slides [jQuery对象]“图片对象”* @param $pages [jQuery对象]“按钮对象”* @param next [int]“要显示的下一个序列号”*/function _ fadeinout ($ slides，$pages，next) {$ slides.eq (nowimage)。CSS ('z-index '，' 2 ')；$slides.eq(下一个)。css({'z-index':'1'})。show()；$pages.eq(下一个)。addClass('current ')。兄弟姐妹()。removeClass('当前')；$slides.eq(nowImage)。fadeOut(400，function(){ $slides.eq(下一个))。法丁(500)；});}1.增加当前图片的z索引和下一张图片的z索引，显示下一张图片，可以做出渐变效果。如果不加，就是一个很钝的开关。

2.选择“下一步”按钮添加选定的样式

3.应用jQuery的淡出和淡入来做隐藏和显示的渐变效果

八、自动循环

/* * * @ method private * @ name _ auto * @ description auto carousel * @ param $ slides[jQuery Object]' picture Object ' * @ param $ pages[jQuery Object]' button Object ' * @ param opts[Object]' param ' */function _ auto($ slides $ pages，opts){ var next=now image 1；var size=$ slides . size()-1；if(！暂停){ if(now image=size){ next=0；} _fadeinout($slides，$ pages，next)；if(now image size){ now image=1；} else { now image=0；} } else { clearInterval(autoMethod)；//暂停时取消自动切换} }1。确定是暂停还是继续旋转木马

2.如果没有挂起，根据情况设置当前页面的序号和下一步按钮

插件仍然有很多问题，比如不能在一个页面上绑定两个不同的对象，以及巨大的修改空间。

通过这次修改，我有了一个切换焦点图的可控插件。虽然问题还很多，但可以一步一步解决。将其嵌入到自己的项目中后，修改起来就方便多了。

演示：http://demo.jb51.net/js/2014/jsilde/

下载：//www . JB 51 . net/jiao Ben/210405 . html