How to implement $.fn and image scrolling effects in jquery

I believe the picture scrolling effect is familiar to everyone. The rendering of Bad Street is as follows. The js implementation code is very short. However, if you want to do it, you must master the basics of jquery, IIFE, setInterval and the usage of $.fn. : I believe everyone has used the image scrolling effect. It seems to be a very simple effect. If you want to master it proficiently, you must know the basics of jquery, IIFE, setInterval and the usage of $.fn. The following article mainly introduces the $.fn in jquery. The necessary knowledge for creating fn and image scrolling effects, friends in need can refer to it.

Usage of $.fn in jquery

$.fn is the namespace of jquery. If you have studied jquery source code, it is not difficult. I found 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 executed jquery.fn.init.prototype=jquery.fn, and used the prototype object of the constructor jquery to overwrite jquery.fn.init() The prototype object allows the jquery.fn.init instance to also access the prototype methods and properties of jquery().

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.

The following uses jquery.extend(object) to extend the jquery class and add class methods:

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

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

##The following uses jquery.fn.extend(object) to extend a method on jquery.prototype.

$.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, you 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() 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 need to stop the picture scrolling. The setting here is very simple, just add an 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 picture can be scrolled continuously

When designing, we definitely don’t want the picture to disappear after scrolling li.length pictures . 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 sentinel 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 called in the definition. 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 surround 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 this. The variable is equal to this, so the second output is still bar. What appears below is the first IIFE form we defined above. 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 upwards, so the fourth output is still bar.

Low configuration version of picture special effects js code

Many of them have added comments: If you have a solid knowledge of jquery and js, it will definitely not be difficult.

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

Related recommendations:

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

jQuery+css to achieve image scrolling effect (with source code)_jquery

JS small function (offsetLeft to achieve image scrolling effect) example code_javascript skills

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