jquery中美元.fn和图片滚动效果实现的必备知识总结 - 行业资讯

图片滚动效果相信对大家来说都不陌生,烂大街的效果图如下所示,js实现代码很短,不过如果想做的话,必须掌握jquery, IIFE, setInterval等基础以美元及.fn用法:

<代码>美元.fn> 　　　　　　jquery.fn=jquery.prototype={ 　　初始化:函数(选择器、上下文){/* 　　*代码　　*/} 　　} 　　　　

所以说<代码> jquery.fn> jquery.prototype> jquery() 实例实际是<代码> jquery.fn.init()> 　　

<强>代码如下:

　　　　　　jQuery=函数(选择器、上下文){//jqeruy内部使用新的创建返回另一个构造函数实力是为了省去调用jquery时前面的新的,并在后面定义了别名美元;//构造函数jquery()调用的是构造函数jQuery.fn.init()的实例　　返回新jQuery.fn。init(选择器、上下文); 　　},/*代码*/ 　　　　

之后后续代码有执行了<代码> jquery.fn.init.prototype=jquery.fn> jquery.fn.init() 的原型对象,使得<代码> jquery.fn.init 实例也能访问到jquery() <代码> 的原型方法和属性。
　　

<强>开发插件的方法:用.fn美元<代码> 扩展jquery生成新的方法。

,,,,,1,可以使用<代码> jquery.extend(对象)扩展jquery类本身,为类添加新的方法。

,,,,,2,用<代码> jquery.fn.extend(对象)给jquery对象添加方法。
　　

下面用<代码> jquery.extend(对象)扩展jquery类,添加类方法:

　　　　　　美元.extent ({ 　　添加:函数(a, b) { 　　返回一个+ b; 　　} 　　}) 　　　　

以后就可以直接使用<代码>美元阀门(1、2);//3
　　

下面用<代码> jquery.fn.extend(对象)对<代码> jquery.prototype 扩展一个方法。

　　　　　　美元.fn.extend ({ 　　(函数名):因数(){/* */代码　　} 　　}); 　　　　

以后可以直接使用<代码> $ (" div ")。函数名()。

这是一个使用到烂大街的一个插件了,不用说也知道是什么,不过具体是怎么实现的,继续往下看。这个插件最主要的部分也就是js的实现,html和css很简单,不赘述。如果下面一些知识点已经熟悉,可以选择性跳过。

<强> setInterval()

<代码> setInterval() 可以按指定时间不停的调用函数,直到调用clearInterval或者关闭窗口。

　　　　　　setInterval(因数(){/*代码*/},[时间]) 　　clearInterval (val_of_seInterval)//参数为setInterval的返回值　　　　

所以当我们制作图片滚动时,当鼠标指针在图片上时,要停止图片滚动,这里设置很简单,只要添加一个<代码> (mouseup,鼠标悬停,因数(){})事件即可。

<强>具体实现代码如下:

　　　　　　var时间=setInterval (picTime par.time);/* 　　*代码　　*/$()内(mouseup,鼠标悬停,因数(){ 　　clearInterval(时间); 　　}) 　　　　

保证图片能够一直循环滚动

在设计时,我们肯定不想图片滚动完<代码> li.length 张就没了,所以要设置一个哨兵指数。

　　　　　　var指数=0; 　　因数picTime () { 　　指数+ +; 　　如果(指数=li.length) { 　　指数=0; 　　} 　　showpicture(指数); 　　} 　　　　

相同的在点击上一张,下一张图片时,我们也要设置一个哨兵,让其能够一直循环下去。

你肯定想要当插件在定义调用完,加载浏览器时,这个插件效果可以立即呈现出来。那就要用到IIFE来构造这个插件,从来达到快速加载,不受其他代码干扰的作用,由于js中,在括号中进行函数声明无效,所以被括号包起来的函数称之为函数表达式。
　　

IIFE的两种形式如下:当圆括号出现在匿名函数的末尾想要调用函数时,它会默认将函数当成是函数声明。当圆括号包裹函数时,它会默认将函数作为表达式去解析,而不是函数声明。