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查找dom的几种方法效率详解
May 17 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery操作元素追加内容示例
Jan 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代码
2010/07/17 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
外贸实习生自荐信范文
2013/11/24 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
单身申明具结书
2015/02/26 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
go 实现简易端口扫描的示例
2021/05/22 Golang
Nginx反向代理、重定向
2022/04/13 Servers
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis