Introduction to the implementation of $.fn and image scrolling effects in jquery

This article mainly introduces the implementation of $.fn and image scrolling effects in jquery. It has a certain reference value. Now I share it with everyone. Friends in need can refer to it

Preface

I believe that the picture scrolling effect is familiar to everyone. The rendering of Bad Street is as shown below. The js implementation code is very short, but if you want to do it, you must Master the basics of jquery, IIFE, setInterval, etc. and the usage of $.fn:

Usage of $.fn in jquery

$.fn is the namespace of jquery. If you have studied the jquery source code, it is not difficult to find the following code in the source code:

jquery.fn=jquery.prototype={
 init:function(selector,context){
 /*
 *code
 */
 }
}

So jquery.fn is the abbreviation of jquery.prototype. The constructor jquery() instance called by our source code is actually an instance of jquery.fn.init().

The code is as follows:

jQuery = function( selector, context ) {
 //jqeruy内部使用new创建返回另一个构造函数实力是为了省去调用jquery时前面的new，并在后面定义了别名$;
 //构造函数jquery()调用的是构造函数jQuery.fn.init()的实例
 return new jQuery.fn.init( selector, context );
},/*code*/

After that, the subsequent code is executedjquery.fn.init.prototype =jquery.fn, use the prototype object of constructor jquery to overwrite the prototype object of jquery.fn.init() so that the jquery.fn.init instance can also be accessed jquery()’s prototype methods and properties.

How to develop plug-ins: Use $.fn to extend jquery to generate new methods.

1. You can use jquery.extend(object) to extend the jquery class itself and add new methods to the class.

2. Use jquery.fn.extend(object) to add methods to the jquery object.

Use jquery.extend(object) below to extend the jquery class and add class methods:

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

You can use it directly in the future$.add(1,2);//3

Usejquery.fn.extend(object)pair# below ##jquery.prototypeExpand a method.

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

You can use

$("p").Function name() directly in the future.

Use $.fn in jquery to encapsulate an image scrolling plug-in

This is a plug-in that is widely used, needless to say Also know what it is. But how to implement it specifically, continue to read below. The most important part of this plug-in is the implementation of js. HTML and css are very simple and will not be described in detail. If you are already familiar with some of the following knowledge points, you can optionally skip them.

setInterval()

setInterval()You can call the function continuously according to the specified time until clearInterval is called or the window is closed.

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

So when we make picture scrolling, when the mouse pointer is on the picture, we want to stop the picture scrolling. The setting here is very simple, just add a

on('mouseup,mouseover',fucntion(){})Event is enough;

The specific implementation code is as follows:

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

Ensure that the pictures can continue to scroll in a loop

When designing, we definitely don’t want the pictures to disappear after scrolling

li.length. So set a sentinel index.

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

Similarly, when clicking on the previous or next picture, we also need to set a sentry so that it can continue to loop.

IIFE

You definitely want the plug-in effect to be displayed immediately when the browser is loaded after the plug-in is defined and called. Then you need to use IIFE to construct this plug-in, so as to achieve fast loading and not be interfered by other codes. Since function declaration in parentheses is invalid in js, the function enclosed by parentheses is called a function expression.

The two forms of IIFE are as follows: When parentheses appear at the end of an anonymous function and you want to call the function, it will default to the function as a function declaration. When parentheses wrap a function, it defaults to parsing the function as an expression rather than a function declaration.

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

Let’s first use a question from Niuke to understand 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();

Because this refers to the myObject object, the first one will definitely output bar, and self is the variable of this, which is equal to this, so the second one will output bar. What appears below is the first one we defined above. This is an IIFE form. At this time, the anonymous function must be executed immediately. Its this points to window, so the output is undefined. The last self is not defined in its own block-level scope, so the self of the parent scope is found upward, so the fourth The first output is still bar.

Low configuration version of picture special effects js code

Many have added comments: If you have a solid knowledge of jquery and js, it is definitely not It's hard.

//$()调用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(&#39;img&#39;).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(&#39;current&#39;).siblings().removeClass(&#39;current&#39;);
 }
 //鼠标经过数字按钮的效果
 if (par.number) {
 $(this).append(&#39;<p class="page-btn"></p>&#39;);
 for (i = 1; i <= len; i++) {
 $(this).find(&#39;.page-btn&#39;).append(&#39;<span>&#39; + i + &#39;</span>&#39;)
 }
 var paging = $(this).find(".page-btn span");
 paging.eq(index).addClass(&#39;current&#39;);
 $(this).find(paging).on(&#39;mouseup mouseover&#39;,function (e) {
 e.preventDefault();
 //获取按钮之间的相对位置,注意这里的$(this)。
 index = $(&#39;p&#39;).find(paging).index($(this));
 showPics(index)
 });
 }
 //上一张，下一张效果
 if (par.arrow) {
 $(this).append(&#39;<span class="leftarrow"></span><span class="rightarrow"></span>&#39;)
 var prev = $(this).find(&#39;span.leftarrow&#39;);
 var next = $(this).find(&#39;span.rightarrow&#39;);
 prev.on(&#39;click&#39;,function (e){
 e.preventDefault();
 index -= 1;
 if (index == -1) { index = len - 1; }
 showPics(index);
 });//上一页
 next.on(&#39;click&#39;,function (e){
 e.preventDefault();
 index += 1;
 if (index == len) { index = 0; }
 showPics(index);
 });
 }
 //停止图片的滚动
 $(this).on(&#39;moveseup mouseover&#39;,function (e) {
 clearInterval(time);
 });
 //清除计时器
 $(this).on(&#39;mouseleave&#39;,function (e) {
 if (par.scroll) { time = setInterval(picTimer, par.Time); } else { clearInterval(time); $(this).find(&#39;$(".page-btn")&#39;).hide() }
 });
 })
}
});

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

jQuery realizes the draggable wishing wall effect

jQuery and canvas realize the flat throwing and color dynamics of the sphere Transformation effect

#Introduction to a simple jQuery slideshow plug-in (jquery-slider) based on JSON format data

The above is the detailed content of Introduction to the implementation of $.fn and image scrolling effects in jquery. For more information, please follow other related articles on the PHP Chinese website!