Comment implémenter $.fn et les effets de défilement d'image dans jquery

Je pense que l'effet de défilement d'image est familier à tout le monde. 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, vous devez maîtriser les bases de jquery, IIFE, setInterval et l'utilisation de $.fn : Je pense que tout le monde a utilisé l'effet de défilement d'image. Cela semble être un effet très simple. Si vous voulez le maîtriser avec compétence, vous devez connaître les bases de jquery, IIFE, setInterval et son utilisation. de $.fn. L'article suivant présente principalement le $.fn dans jquery Les connaissances nécessaires pour créer des effets de défilement fn et d'images, les amis dans le besoin peuvent s'y référer.

Utilisation de $.fn dans jquery

$.fn est l'espace de noms de jquery Si vous avez étudié le code source de jquery, c'est le cas. pas difficile. J'ai trouvé le code suivant dans le code source :

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

Donc jquery.fn est l'abréviation de jquery.prototype. L'instance du constructeur jquery() appelée par notre code source est en fait une instance de 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 a exécuté jquery.fn.init.prototype=jquery.fn et a utilisé l'objet prototype du constructeur jquery pour écrasez l'objet prototype jquery.fn.init(), afin que l'instance jquery.fn.init puisse également accéder aux méthodes prototypes et aux propriétés de jquery().

Comment développer des plug-ins : utilisez $.fn pour étendre jquery afin de générer de nouvelles méthodes.

1. Vous pouvez utiliser jquery.extend(object) pour étendre la classe jquery elle-même et ajouter de nouvelles méthodes à la classe.

2. Utilisez jquery.fn.extend(object) pour ajouter des méthodes à l'objet jquery.

Ce qui suit utilise jquery.extend(object) pour étendre la classe jquery et ajouter des méthodes de classe :

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

Vous pouvez utiliser $.add(1,2);/ / 3

Ce qui suit utilise jquery.fn.extend(object) pour étendre une méthode sur jquery.prototype.

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

Vous pouvez utiliser $(“p”).function name() directement dans le futur.

Utilisez $.fn dans jquery pour encapsuler un plug-in de défilement d'image

Il s'agit d'un plug-in largement utilisé. Inutile de dire que vous savez 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()

setInterval() peut appeler la fonction en continu en fonction de l'heure spécifiée jusqu'à ce que clearInterval soit appelé ou que la fenêtre soit fermée.

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

Ainsi, lorsque nous faisons défiler l'image, lorsque le pointeur de la souris est sur l'image, nous devons arrêter le défilement de l'image. Le paramètre ici est très simple, ajoutez simplement un on('mouseup,mouseover'. ,fucntion(){ }) event ;

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 défiler en continu en boucle

Lors de la conception , nous ne voulons certainement pas que l'image défile complètement. Définissez donc un index sentinelle.

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.

IIFE

Vous souhaitez absolument que l'effet du plug-in soit affiché immédiatement lorsque le navigateur est chargé après que le plug-in soit défini et appelé. 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 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 cela fait référence à l'objet myObject, le premier affichera certainement la barre, et self est la variable de this, ce qui est égal à this, donc la deuxième sortie est toujours bar. Ce qui apparaît ci-dessous est le premier formulaire IIFE que nous avons défini ci-dessus. À ce stade, la fonction anonyme doit être exécutée immédiatement, et cela pointe vers la fenêtre. la sortie n'est pas définie et le dernier self n'est pas défini dans sa propre portée au niveau du bloc, donc le self de la portée parent se trouve vers le haut, donc la quatrième sortie est toujours 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 ne sera certainement pas 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('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('<p class="page-btn"></p>');
 for (i = 1; i <= len; i++) {
 $(this).find(&#39;.page-btn&#39;).append(&#39;<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 = $('p').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() }
 });
 })
}
});

Recommandations associées :

[Transfer] div+css image scrolling effect_html/css_WEB-ITnose

jQuery +css pour obtenir un effet de défilement d'image (avec le code source)_jquery

Petite fonction JS (offsetLeft pour obtenir un effet de défilement d'image) exemple de compétences code_javascript

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!