Introduction à l'implémentation de $.fn et des effets de défilement d'image dans jquery

Cet article présente principalement l'implémentation de $.fn et des effets de défilement d'image dans jquery. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

<.>Avant-propos

Je pense que tout le monde connaît l'effet de défilement d'image. Le rendu de Bad Street est comme indiqué ci-dessous. Le code d'implémentation js est très court, mais si vous voulez le faire. cela, vous devez maîtriser les bases de l'utilisation de jquery, IIFE, setInterval et $.fn :

Utilisation de $.fn dans jquery

est l'espace de noms de jquery Si vous avez étudié le code source de jquery, il n'est pas difficile de trouver le code suivant dans le code source : $.fn

<.>

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

Donc

est l'abréviation de

. L'instance du constructeur jquery.fn appelée par notre code source est en fait une instance de jquery.prototype. jquery（）jquery.fn.init（）

Le code est le suivant :

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

Après cela, le code suivant est exécuté

, en utilisant le constructeur jquery L'objet prototype couvre l'objet prototype de

, de sorte que l'instance jquery.fn.init.prototype=jquery.fn puisse également accéder aux méthodes et propriétés prototypes de jquery.fn.init(). jquery.fn.initjquery()

Comment développer des plug-ins :

Utilisez pour étendre jquery afin de générer de nouvelles méthodes. $.fn 1. Vous pouvez utiliser

pour étendre la classe jquery elle-même et ajouter de nouvelles méthodes à la classe.

jquery.extend(object) 2. Utilisez

pour ajouter des méthodes à l'objet jquery.

jquery.fn.extend(object)
Les utilisations suivantes

pour étendre la classe jquery et ajouter des méthodes de classe :

jquery.extend(object)

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

Vous pouvez l'utiliser directement dans le futur

$.add(1,2);//3
Ce qui suit utilise

pour étendre une méthode à

. jquery.fn.extend(object)jquery.prototype

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

Vous pouvez utiliser

function name() directement à l'avenir.

$(“p”).

Utilisez $.fn dans jquery pour encapsuler un plug-in de défilement d'imageIl s'agit d'un plug-in largement utilisé, inutile à dire Sachez aussi ce que c'est. Mais comment le mettre en œuvre spécifiquement, continuez à lire ci-dessous. La partie la plus importante de ce plug-in est l'implémentation de js HTML et CSS qui sont très simples et ne seront pas décrites en détail. Si vous connaissez déjà certains des points de connaissances suivants, vous pouvez éventuellement les ignorer.

setInterval()

Vous pouvez appeler la fonction en continu à l'heure spécifiée jusqu'à ce que clearInterval soit appelé ou que la fenêtre soit fermée.

setInterval()

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

Donc, quand on fait défiler l'image, lorsque le pointeur de la souris est sur l'image, pour arrêter le défilement de l'image, le réglage ici est très simple , il suffit d'ajouter un événement

on(‘mouseup,mouseover',fucntion(){})

Le code d'implémentation spécifique est le suivant :

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

Assurez-vous que l'image peut toujours faire défiler en boucle

Lors de la conception, nous ne voulons certainement pas que les images disparaissent après le défilement

. Définissez donc un index sentinelle.

li.length

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

De même, en cliquant sur l'image précédente ou suivante, nous devons également définir une sentinelle pour qu'elle puisse continuer à boucler.

IIFEVous souhaitez absolument que l'effet du plug-in soit affiché immédiatement lorsque le navigateur est chargé après l'appel du plug-in la définition. Ensuite, vous devez utiliser IIFE pour construire ce plug-in, afin d'obtenir un chargement rapide et de ne pas être interféré par d'autres codes. Étant donné que la déclaration de fonction entre parenthèses n'est pas valide dans js, la fonction entourée de parenthèses est appelée une expression de fonction.

Les deux formes d'IIFE sont les suivantes : lorsque des parenthèses apparaissent à la fin d'une fonction anonyme et que vous souhaitez appeler une fonction, la fonction sera par défaut une déclaration de fonction. Lorsque des parenthèses enveloppent une fonction, la fonction est analysée par défaut comme une expression plutôt que comme une déclaration de fonction.

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

Utilisons d'abord une question de Niuke pour comprendre l'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();

Parce que ceci fait référence à l'objet myObject, le premier affichera certainement une barre, et self est la variable de ceci, qui est égale à ceci, donc le second affichera une barre. Ce qui apparaît ci-dessous est ce que nous avons au-dessus du premier. Le formulaire IIFE défini doit être exécuté immédiatement. Son this pointe vers window, donc la sortie n'est pas définie dans sa propre portée au niveau du bloc, donc la self de la portée parent est trouvée vers le haut, donc la quatrième sortie. est toujours un bar.

Version basse configuration du code js des effets spéciaux d'image Beaucoup d'entre eux ont ajouté des commentaires : Si vous avez une solide connaissance de jquery et js , ce n'est certainement pas le cas. C'est difficile.

//$()调用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() }
 });
 })
}
});

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois !

Recommandations associées :

jQuery réalise l'effet de mur de souhaits déplaçable

jQuery et Canvas réalisent le lancer à plat et la dynamique des couleurs de la sphère Effet de transformation

Introduction à un simple plug-in de diaporama jQuery (jquery-slider) basé sur des données au format JSON

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!