$ jquery中的fn和实现图片滚动效果的必要知识总结

序

相信图片滚动效果大家都不陌生。烂大街效果图如下图。js实现代码很短，但是如果你想做到这一点，你必须掌握一些基础知识，比如jquery、IIFE、setInterval和$的用法。fn:

$的用法。jquery中的fn

$.fn是jquery的命名空间。如果你研究过jquery的源代码，不难在源代码中找到以下代码：

Jquery.fn=Jquery.prototype={ init : function(selector，context) {/* * code */}}所以jquery . fn是jquery . prototype的缩写，我们的源代码调用的构造函数jquery()实例实际上是jquery.fn.init()的一个实例。

代码如下：

Jquery=function (selector，context) {//jqeruy内部使用new创建并返回另一个构造函数，以便在调用Jquery时保存之前的new，稍后定义别名$即可；//构造函数jquery()调用构造函数jQuery.fn.init()的一个实例，返回新的jquery.fn.init(选择器，上下文)；}，/*code*/，下面的代码已经执行了jquery.fn.init . prototype=jquery . fn，并用构造函数jquery的prototype对象覆盖了jquery.fn.init()的原型对象，这样jquery . fn . init实例也可以访问jquery()的原型方法和属性。

开发插件的方法：用$扩展jquery。fn生成新方法。

1.jquery.extend(object)可用于扩展jquery类本身，并向该类添加新方法。

2.使用jquery.fn.extend(object)向jquery对象添加方法。

使用jquery.extend(object)扩展了以下jquery类，并添加了类方法：

$.范围({ add:函数(a，b){返回a，b；}})您可以使用$。以后直接加(1，2)；//3

下面使用jquery.fn.extend(对象)将一个方法扩展到jquery.prototype

$ . fn . extend({[函数名]:function(){/* code */} })；您可以使用$(“div”)。函数名()以后直接取。

用$封装一个图片滚动插件。jquery中的fn

这是烂大街上用的插件。不用说，我知道是什么。但是如何实现呢，继续往下看。这个插件最重要的部分是js的实现。html和css非常简单，所以我就不赘述了。如果对以下知识点比较熟悉，可以选择性跳过。

setInterval()

SetInterval()可以在指定的时间调用函数，直到调用clearInterval或者关闭窗口。

SetInterval(function(){/* code */}，[time])clear interval(val _ of _ seiinterval)//参数是set interval的返回值，所以我们在进行图片滚动的时候，当鼠标指针在图片上的时候，就应该停止图片滚动。这里的设置非常简单，只需添加一个ON ('mouseup，mouseover '，

具体实现代码如下：

var time=setInterval(picTime，par . time)；/* *代码*/$(这个)。on('mouseup，mouseover '，function content(){ clearInterval(time)；})确保图片始终可以循环滚动

在设计上，我们当然不希望画面滚动后消失。因此，我们应该设立一个哨点指数。

var索引=0；function ment Pictime(){ index；if(index=Li . length){ index=0；} showpicture(索引)；}同样，在点击上一张图片和下一张图片时，也要设置岗哨，保持循环。

生活

当插件在定义中被调用并加载到浏览器中时，您肯定希望插件效果立即出现。有必要用IIFE来构造这个插件，它总是可以快速加载，不受其他代码的干扰。在js中，圆括号中的函数声明是无效的，所以圆括号中的函数称为函数表达式。

IIFE的两种形式如下：当一个匿名函数的末尾出现圆括号，你想调用它时，默认情况下它会把函数当作函数声明。当一个函数被括在圆括号中时，默认情况下，它会将该函数解析为表达式，而不是函数声明。

(function(){ }()；(function(){ })()；让我们先用一个牛科的话题来理解生活：

var myObject={ foo: 'bar '，func : function(){ var self=this；控制台。日志(这个。foo)；控制台。日志(自我。foo)；(函数(){控制台。日志(这个。foo)；控制台。日志(自我。foo)；}());}};我的目标。func()；因为这指代的是myObject对象，所以第一个肯定输出酒吧，而自己是这的变量，等于是这个，所以第二个输出的还是酒吧，下面出现的就是我们上文定义的第一种生活形式，此时必须立即执行匿名函数，它的这指向的是窗户，所以输出未定义，最后的自己在自己的块级作用域没有定义，所以向上找到父级作用域的自我，因此第四个输出的还是酒吧。

低配版图片特效射流研究…代码

很多都加了注释：如果jquery、js上文的知识掌握扎实，肯定不是很难。

//$()调用jquery对象，life $(function(){ $)。fn。scroll pic=function(params){//返回这个。每个(函数(){ var defaults={ ele : }).滑块',//切换对象时间： '2000 ',//自动切换时间速度： '1000 ',//图片切换速度scroll: true，//是否滚动图片，虽然肯定是让它滚动的，但是我们还是设置一个意思一下箭头：为假，//是否设置箭头number: true//是否添加右下角数字};//定义默认参数，其中若在超文本标记语言页面设置了参数是，这里的参数会替换默认值var par=$ .扩展({}，默认值，参数);var scrollit=$(this).find(' ul ')；//找到保险商实验所标签元素var listLi=$(this).find(' Li ')；//找到里标签元素定义变量索引=0;var pWidth=$(this).宽度();var pHeight=$(this).高度();var len=$(this).查找('里').长度；//li标签数量//设置里标签和img的宽、高listLi.css({ 'width': pWidth，' height ' : pHeight })；listLi.find('img ').css({ 'width': pWidth，' height ' : pHeight })；//设置保险商实验所标签的宽值为里的低输入联网(低入门网络的缩写)倍/overflow :隐藏滚动列表。CSS(' width '，pWidth * len)；//图片循环滚动的关键所在函数pictimer(){ index；if(index==len){ index=0；} showPics(索引);} //自动切换函数if(par。滚动){ var time=setInterval(Pictimer，par .时间);} else { $(' .第-btn页hide()；}函数show pics(index){ var now left=-index * pWidth；//添加向左移动的特效$(这个)。查找（滚动列表)。动画({ 'left': nowLeft }，标准杆。速度)；//找到与指数相等的那个按钮，添加类名电流，并将每个同胞元素移除类名当前$(本)。查找（分页)。eq(指数)。addClass('current ').兄弟姐妹()。removeClass(“”当前');} //鼠标经过数字按钮的效果如果(面值){ $(本)。追加(' div class=' page-BTN '/div ')；for(I=1；i=len我){ $(这个)。查找('。第-btn页。追加(' span ' I '/span ')} var paging=$(this).查找('。页面-BTN跨度')；paging.eq(索引)。添加CLaSS(' current ')；$(这个)。查找（分页)。on('mouseup mouseover '，函数(e){ e . prevent default()；//获取按钮之间的相对位置，注意这里的$(这个).索引=$(“div”).查找（分页)。索引($(this))；显示图片(索引)})；} //上一张，下一张效果if (par.arrow) { $(this).追加(' span class='左箭头'/span span class='右箭头'/span)var prev=$(this).查找(' span。左箭头')；var next=$(this).查找(' span。右箭头')；prev.on('click ')，函数(e){ e . prevent default()；index-=1；if(index==-1){ index=len-1；} showPics(索引);});//上一页next.on('click ')，函数(e){ e . prevent default()；索引=1;if(index==len){ index=0；} showPics(索引);});} //停止图片的滚动$(这个)。on('moveseup mouseover '，函数{ clearInterval(时间)；});//清除计时器$(这个)。on('mouseleave '，函数{ if(par。滚动){ time=setInterval(Pictimer，par .时间);} else { clearInterval(时间);$(这个)。查找(' $(').page-btn ')').hide()} })；})}});下面是完整的html、css js代码链接。

完整代码，图片自加

本地下载：点击这里

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。