In jquery, a summary of the essential knowledge for implementing the $. fn and image scrolling effects is provided.

In jquery, a summary of the essential knowledge for implementing the $. fn and image scrolling effects is provided.

Preface

I believe that the image rolling effect is no stranger to everyone. As shown in the following figure, js implementation code is very short. However, if you want to do so, you must master the basics of jquery, IIFE, setInterval, and $. fn usage:

$. Fn usage in jquery

$.fnIt is the namespace of jquery. If you have learned 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 */ }}

Sojquery.fnThat isjquery.prototype. Constructors called by our source codejquery（）The actual instance isjquery.fn.init（）.

The Code is as follows:

JQuery = function (selector, context) {// use new internally in jqeruy to create and return another constructor. The strength of the constructor is to save the new before calling jquery, And the alias $ is defined later; // The constructor jquery () calls the constructor jQuery. fn. init () instance return new jQuery. fn. init (selector, context) ;},/* code */

The subsequent code is executed.jquery.fn.init.prototype=jquery.fnUsing the prototype object of the constructor jquery to overwritejquery.fn.init()To makejquery.fn.initThe instance can also accessjquery()The prototype method and attributes.

Method for developing plug-ins:Use$.fnExtend jquery to generate a new method.

1. Availablejquery.extend(object)Extends the jquery class and adds new methods to the class.

2. Usejquery.fn.extend(object)Add a method to the jquery object.

Usejquery.extend(object)Extend the jquery class and add the class method:

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

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

Usejquery.fn.extend(object)Pairjquery.prototypeExtend a method.

$. Fn. extend ({[function name]: fucntion () {/* code */}});

You can use it directly later.$(“div”).Function Name ().

Encapsulate an image scrolling plug-in using $. fn in jquery

This is a plug-in used in the bad Street. You don't have to know what it is. However, let's continue with the implementation. The most important part of this plug-in is the implementation of js. html and css are simple and will not be repeated. If you are familiar with the following knowledge points, skip them.

SetInterval ()

setInterval()You can call a function at a specified time until clearInterval is called or the window is closed.

SetInterval (fucntion () {/* code */}, [time]) clearInterval (val_of_seInterval) // return value of the parameter setInterval

So when we make an image scroll, when the mouse pointer is on the image, we need to stop the image scroll. Here the setting is very simple, as long as we addon(‘mouseup,mouseover',fucntion(){})Event;

The specific implementation code is as follows:

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

Ensure that images are continuously scrolling

During the design, we certainly don't want to finish the image scrolling.li.lengthZhang is gone. Therefore, you need to set a sentinel index.

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

Similarly, when you click the previous image and the next image, we also need to set a sentinel so that it can keep repeating.

IIFE

You must want the effect of the plug-in to be displayed immediately when the definition call is complete and the browser is loaded. It is necessary to use IIFE to construct this plug-in, which can never be quickly loaded without interference from other code. In JavaScript, function declaration in parentheses is invalid. Therefore, functions wrapped in parentheses are called function expressions.

IIFE has the following two forms: When parentheses appear at the end of an anonymous function and you want to call a function, it treats the function as a function declaration by default. When a function is enclosed in parentheses, it parses the function as an expression by default, rather than a function declaration.

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

Let's take a look at IIFE with a question from Niu Ke:

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 bar must be output, while self is the variable of this. Therefore, the second output is bar, the following figure shows the first IIFE form defined above. At this time, the anonymous function must be executed immediately. this indicates window, so the output is undefined, the final self is not defined in its block-level scope, so the self of the parent-level scope is found up. Therefore, the fourth output is bar.

Js Code for low-configuration image effects

Many of them have been added with comments: If jquery and js have a solid grasp of the above knowledge, it is certainly not very difficult.

// $ () Calls the jquery object, IIFE $ (function () {$. fn. scrollPic = function (params) {// return this. each (function () {var defaults = {ele :'. slider ', // switch object Time: '000000', // automatic switch Time speed: '000000', // image switching speed scroll: true, // whether to scroll the image, although it must be rolled, let's set a meaning. Arrow: false, // whether to set the arrow number: true // whether to add the number in the lower right corner}; // define the default parameter. If param is set on the html page, here, params will replace defaults var par = $. extend ({}, defaults, params); var scrollList = $ (this ). find ('ul '); // find the ul Tag Element var listLi = $ (this ). find ('lil'); // find the li Tag Element var index = 0; var pWidth = $ (this ). width (); var pHeight = $ (this ). height (); var len = $ (this ). find ("li "). length; // <li> Number of tags // set the width and height of the li tag and img listLi.css ({"width": pWidth, "Height": pHeight}); listli.find('img'}.css ({"width": pWidth, "height": pHeight }); // set the ul tag width to len times of li/overflow: hidden scrollList.css ("width", pWidth * len); // function picTimer () {index ++; if (index = len) {index = 0 ;}showpics (index) ;}// automatic switch function if (par. scroll) {var time = setInterval (picTimer, par. time);} else {$ (". page-btn "). hide ();} function showPics (index) {var nowL Eft =-index * pWidth; // Add the special effect of moving to the left $ (this ). find (scrollList ). animate ({"left": nowLeft}, par. speed); // find the button that is equal to the index, add the class name current, and remove each compatriot element from the class name current $ (this ). find (paging ). eq (index ). addClass ('current '). siblings (). removeClass ('stream');} // The effect of the if (par. number) {$ (this ). append ('<div class = "page-btn"> </div>'); for (I = 1; I <= len; I ++) {$ (this ). find ('. page-btn '). append ('<span>' + I + '</s Pan> ')} var paging = $ (this ). find (". page-btn span "); paging. eq (index ). addClass ('current'); $ (this ). find (paging ). on ('mouseup mouseover', function (e) {e. preventDefault (); // obtain the relative position between buttons. Pay attention to $ (this ). Index = $ ('div '). find (paging ). index ($ (this); showPics (index)});} // the previous one. The next one is 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) ;}); // previous page next. on ('click', function (e) {e. preventDefault (); index + = 1; if (index = len) {index = 0;} showPics (index );});} // stop image scrolling $ (this ). on ('moveseup mouseover', function (e) {clearInterval (time) ;}); // clear the timer $ (this ). on ('mouseleave ', function (e) {if (par. scroll) {time = setInterval (picTimer, par. time) ;}else {clearInterval (time); $ (this ). find ('$ (". page-btn ")'). hide ()}});})}});

Below is a complete link to html, css + js Code.

Complete code, Image Self-added

Local download: click here

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.