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.
$.fn.extend({
[函数名]：fucntion(){
/*code*/
}
});setInterval(fucntion(){/*code*/},[time])
clearInterval(val_of_seInterval)//参数为setInterval的返回值var time=setInterval(picTime,par.time);
/*
*code
*/
$(this).on('mouseup,mouseover',fucntion(){
clearInterval(time);
})var index=0;
fucntion picTime(){
index++;
if(index=li.length){
index=0;
}
showpicture(index);
}(function(){}());
(function(){})();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();//$()调用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('.page-btn').append('<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() }
});
})
}
});[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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Users encounter rare glitches: Samsung Watch smartwatches suddenly experience white screen issues
Apr 03, 2024 am 08:13 AM
You may have encountered the problem of green lines appearing on the screen of your smartphone. Even if you have never seen it, you must have seen related pictures on the Internet. So, have you ever encountered a situation where the smart watch screen turns white? On April 2, CNMO learned from foreign media that a Reddit user shared a picture on the social platform, showing the screen of the Samsung Watch series smart watches turning white. The user wrote: "I was charging when I left, and when I came back, it was like this. I tried to restart, but the screen was still like this during the restart process." Samsung Watch smart watch screen turned white. The Reddit user did not specify the smart watch. Specific model. However, judging from the picture, it should be Samsung Watch5. Previously, another Reddit user also reported
How to implement dual WeChat login on Huawei mobile phones?
Mar 24, 2024 am 11:27 AM
How to implement dual WeChat login on Huawei mobile phones? With the rise of social media, WeChat has become one of the indispensable communication tools in people's daily lives. However, many people may encounter a problem: logging into multiple WeChat accounts at the same time on the same mobile phone. For Huawei mobile phone users, it is not difficult to achieve dual WeChat login. This article will introduce how to achieve dual WeChat login on Huawei mobile phones. First of all, the EMUI system that comes with Huawei mobile phones provides a very convenient function - dual application opening. Through the application dual opening function, users can simultaneously
Kyushu Fengshen Assassin 4S Radiator Review Air-cooled 'Assassin Master' Style
Mar 28, 2024 am 11:11 AM
Speaking of ASSASSIN, I believe players will definitely think of the master assassins in "Assassin's Creed". They are not only skilled, but also have the creed of "devoting themselves to the darkness and serving the light". The ASSASSIN series of flagship air-cooled radiators from the appliance brand DeepCool coincide with each other. Recently, the latest product of this series, ASSASSIN4S, has been launched. "Assassin in Suit, Advanced" brings a new air-cooling experience to advanced players. The appearance is full of details. The Assassin 4S radiator adopts a double tower structure + a single fan built-in design. The outside is covered with a cube-shaped fairing, which has a strong overall sense. It is available in white and black colors to meet different colors. Tie
PHP Programming Guide: Methods to Implement Fibonacci Sequence
Mar 20, 2024 pm 04:54 PM
The programming language PHP is a powerful tool for web development, capable of supporting a variety of different programming logics and algorithms. Among them, implementing the Fibonacci sequence is a common and classic programming problem. In this article, we will introduce how to use the PHP programming language to implement the Fibonacci sequence, and attach specific code examples. The Fibonacci sequence is a mathematical sequence defined as follows: the first and second elements of the sequence are 1, and starting from the third element, the value of each element is equal to the sum of the previous two elements. The first few elements of the sequence
Easily understand 4K HD images! This large multi-modal model automatically analyzes the content of web posters, making it very convenient for workers.
Apr 23, 2024 am 08:04 AM
A large model that can automatically analyze the content of PDFs, web pages, posters, and Excel charts is not too convenient for workers. The InternLM-XComposer2-4KHD (abbreviated as IXC2-4KHD) model proposed by Shanghai AILab, the Chinese University of Hong Kong and other research institutions makes this a reality. Compared with other multi-modal large models that have a resolution limit of no more than 1500x1500, this work increases the maximum input image of multi-modal large models to more than 4K (3840x1600) resolution, and supports any aspect ratio and 336 pixels to 4K Dynamic resolution changes. Three days after its release, the model topped the HuggingFace visual question answering model popularity list. Easy to handle
Huntkey MX750P full module power supply review: 750W of concentrated platinum strength
Mar 28, 2024 pm 03:20 PM
With its compact size, the ITX platform has attracted many players who pursue the ultimate and unique beauty. With the improvement of manufacturing processes and technological advancements, both Intel's 14th generation Core and RTX40 series graphics cards can exert their strength on the ITX platform, and gamers also There are higher requirements for SFX power supply. Game enthusiast Huntkey has launched a new MX series power supply. In the ITX platform that meets high-performance requirements, the MX750P full-module power supply has a rated power of up to 750W and has passed 80PLUS platinum level certification. Below we bring the evaluation of this power supply. Huntkey MX750P full-module power supply adopts a simple and fashionable design concept. There are two black and white models for players to choose from. Both use matte surface treatment and have a good texture with silver gray and red fonts.
Exquisite light and shadow art in spring, Haqu H2 is the cost-effective choice
Apr 17, 2024 pm 05:07 PM
With the arrival of spring, everything revives and everything is full of vitality and vitality. In this beautiful season, how to add a touch of color to your home life? Haqu H2 projector, with its exquisite design and super cost-effectiveness, has become an indispensable beauty in this spring. This H2 projector is compact yet stylish. Whether placed on the TV cabinet in the living room or next to the bedside table in the bedroom, it can become a beautiful landscape. Its body is made of milky white matte texture. This design not only makes the projector look more advanced, but also increases the comfort of the touch. The beige leather-like material adds a touch of warmth and elegance to the overall appearance. This combination of colors and materials not only conforms to the aesthetic trend of modern homes, but also can be integrated into
Colorful Hidden Star P15 24 Review: A hard-core all-round gaming laptop with both good looks and performance
Mar 06, 2024 pm 04:40 PM
In the current era of rapid technological development, laptops have become an indispensable and important tool in people's daily life and work. For those players who have high performance requirements, a laptop with powerful configuration and excellent performance can meet their hard-core needs. With its excellent performance and stunning design, the Colorful Hidden Star P15 notebook computer has become the leader of the future and can be called a model of hard-core notebooks. Colorful Hidden Star P1524 is equipped with a 13th generation Intel Core i7 processor and RTX4060Laptop GPU. It adopts a more fashionable spaceship design style and has excellent performance in details. Let us first take a look at the features of this notebook. Supreme equipped with Intel Core i7-13620H processing
