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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jquery实现直播弹幕效果
Nov 28 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
php修改数组键名的方法示例
2017/04/15 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PDO::quote讲解
2019/01/29 PHP
php生成微信红包数组的方法
2019/09/05 PHP
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
信息管理专业学生自荐信格式
2013/09/22 职场文书
大学生毕业自我鉴定
2013/11/06 职场文书
质检员的岗位职责
2013/11/15 职场文书
饮料业务员岗位职责
2013/12/15 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
优质服务演讲稿
2014/05/14 职场文书
一份文言文检讨书
2014/09/13 职场文书
先进个人申报材料
2014/12/30 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby