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使用正则验证15/18身份证的方法示例
Apr 27 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jquery实现烟花效果(面向对象)
Mar 10 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
两种php调用Java对象的方法
2006/10/09 PHP
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
Python实现简易Web爬虫详解
2018/01/03 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
QA工程师岗位职责
2013/11/20 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
张丽莉观后感
2015/06/16 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
实验心得体会范文
2016/01/25 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python