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


Posted in jQuery onApril 21, 2017

前言

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

jquery中$.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()的实例
 return new jQuery.fn.init( selector, context );
},/*code*/

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

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

      1、可以使用jquery.extend(object)扩展jquery类本身,为类添加新的方法。

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

下面用jquery.extend(object)扩展jquery类,添加类方法:

$.extent({ 
 add: function(a,b){
 return a+b;
 }
})

以后就可以直接使用$.add(1,2);//3

下面用jquery.fn.extend(object)jquery.prototype扩展一个方法。

$.fn.extend({
 [函数名]:fucntion(){
 /*code*/
 }
});

以后可以直接使用$(“div”).函数名()。

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

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

setInterval()

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

setInterval(fucntion(){/*code*/},[time])
clearInterval(val_of_seInterval)//参数为setInterval的返回值

所以当我们制作图片滚动时,当鼠标指针在图片上时,要停止图片滚动,这里设置很简单,只要添加一个on(‘mouseup,mouseover',fucntion(){})事件即可;

具体实现代码如下:

var time=setInterval(picTime,par.time);
/*
*code
*/
$(this).on('mouseup,mouseover',fucntion(){
 clearInterval(time);
 })

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

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

var index=0;
fucntion picTime(){
 index++;
 if(index=li.length){
 index=0;
 }
 showpicture(index);
}

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

IIFE

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

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

(function(){}());
(function(){})();

下面先来用牛客的一道题目来理解一下IIFE:

var myObject = { 
 foo: "bar", 
 func: function() { 
 var self = this; 
 console.log(this.foo); 
 console.log(self.foo); 
 (function() { 
 console.log(this.foo); 
 console.log(self.foo); 
 }()); 
}};
 myObject.func();

因为this指代的是myObject对象,所以第一个肯定输出bar,而self是this的变量,等于是this,所以第二个输出的还是bar,下面出现的就是我们上文定义的第一种IIFE形式,此时必须立即执行匿名函数,它的this指向的是window,所以输出undefined,最后的self在自己的块级作用域没有定义,所以向上找到父级作用域的self,因此第四个输出的还是bar。

低配版图片特效js代码

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

//$()调用jquery对象 ,IIFE
$(function () {
 $.fn.ScrollPic = function (params) {
 //
 return this.each(function () {
 var defaults = {
 ele: '.slider',//切换对象
 Time: '2000',//自动切换时间
 speed: '1000',//图片切换速度
 scroll: true,//是否滚动图片,虽然肯定是让它滚动的,但是我们还是设置一个意思一下。
 arrow: false,//是否设置箭头
 number: true//是否添加右下角数字
 };
 //定义默认参数,其中若在html页面设置了param是,这里的params会替换defaults
 var par = $.extend({}, defaults, params);
 var scrollList = $(this).find('ul');//找到ul标签元素
 var listLi = $(this).find('li');//找到li标签元素
 var index = 0;
 var pWidth = $(this).width();
 var pHeight = $(this).height();
 var len = $(this).find("li").length;//<li>标签数量
 //设置li标签和img的宽、高
 listLi.css({ "width": pWidth, "height": pHeight });
 listLi.find('img').css({ "width": pWidth, "height": pHeight });
 //设置ul标签的宽值为li的len倍/overflow:hidden
 scrollList.css("width", pWidth * len);
 //图片循环滚动的关键所在
 function picTimer() {
 index++;
 if (index == len) { index = 0; }
 showPics(index);
 }
 //自动切换函数
 if (par.scroll)
 {
 var time = setInterval(picTimer, par.Time);
 } else {
 $(".page-btn").hide();
 }
 function showPics(index) {
 var nowLeft = -index * pWidth;
 //添加向左移动的特效
 $(this).find(scrollList).animate({ "left": nowLeft }, par.speed);
 //找到与index相等的那个按钮,添加类名current,并将每个同胞元素移除类名current
 $(this).find(paging).eq(index).addClass('current').siblings().removeClass('current');
 }
 //鼠标经过数字按钮的效果
 if (par.number) {
 $(this).append('<div class="page-btn"></div>');
 for (i = 1; i <= len; i++) {
 $(this).find('.page-btn').append('<span>' + i + '</span>')
 }
 var paging = $(this).find(".page-btn span");
 paging.eq(index).addClass('current');
 $(this).find(paging).on('mouseup mouseover',function (e) {
 e.preventDefault();
 //获取按钮之间的相对位置,注意这里的$(this)。
 index = $('div').find(paging).index($(this));
 showPics(index)
 });
 }
 //上一张,下一张效果
 if (par.arrow) {
 $(this).append('<span class="leftarrow"></span><span class="rightarrow"></span>')
 var prev = $(this).find('span.leftarrow');
 var next = $(this).find('span.rightarrow');
 prev.on('click',function (e){
 e.preventDefault();
 index -= 1;
 if (index == -1) { index = len - 1; }
 showPics(index);
 });//上一页
 next.on('click',function (e){
 e.preventDefault();
 index += 1;
 if (index == len) { index = 0; }
 showPics(index);
 });
 }
 //停止图片的滚动
 $(this).on('moveseup mouseover',function (e) {
 clearInterval(time);
 });
 //清除计时器
 $(this).on('mouseleave',function (e) {
 if (par.scroll) { time = setInterval(picTimer, par.Time); } else { clearInterval(time); $(this).find('$(".page-btn")').hide() }
 });
 })
}
});

下面是完整的html、css+js代码链接。

总结

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

jQuery 相关文章推荐
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery+pjax简单示例汇总
Apr 21 #jQuery
基于jQuery实现文字打印动态效果
Apr 21 #jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 #jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 #jQuery
jQuery Plupload上传插件的使用
Apr 19 #jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 #jQuery
jQuery加密密码到cookie的实现代码
Apr 18 #jQuery
You might like
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python如何将多个PDF进行合并
2019/08/13 Python
python小白切忌乱用表达式
2020/05/29 Python
python如何停止递归
2020/09/09 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
html5图片上传预览示例分享
2014/04/14 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
检察官就职演讲稿
2014/01/13 职场文书
九年级科学教学反思
2014/01/29 职场文书
小学三年级学生评语
2014/04/22 职场文书
励志演讲稿300字
2014/08/21 职场文书
会计专业自荐信范文
2015/03/05 职场文书
超市食品安全承诺书
2015/04/29 职场文书