Home Web Front-end JS Tutorial Picture left and right seamless scrolling plug-in based on jQuery_jquery

Picture left and right seamless scrolling plug-in based on jQuery_jquery

May 16, 2016 pm 05:53 PM
Seamless scrolling

Online demo: http://demo.jb51.net/js/2012/myslideLeftRight/
Package download: http://www.jb51.net/jiaoben/44973.html
Core code:

Copy code The code is as follows:

(function($ ){
$.fn.extend({
"slidelf":function(value){
value = $.extend({
"prev":"",
"next" :"",
"speed":""
},value)
var dom_this = $(this).get(0); //Convert jquery object into DOM object; for use in other functions Call;
var marginl = parseInt($("ul li:first",this).css("margin-left")); //The value of each image margin
var movew = $("ul li:first",this).outerWidth() marginl; //The value that needs to be slid
//The animation on the left
function leftani(){
$("ul li:first",dom_this). animate({"margin-left":-movew},value.speed,function(){
$(this).css("margin-left",marginl).appendTo($("ul",dom_this) );
});
}
//Animation on the right
function rightani(){
$("ul li:last",dom_this).prependTo($("ul" ,dom_this));
$("ul li:first",dom_this).css("margin-left",-movew).animate({"margin-left":marginl},value.speed);
}
//Click on the left
$("." value.prev).click(function(){
if(!$("ul li:first",dom_this).is(" :animated")){
leftani();
}
});
//Click on the left
$("." value.next).click(function(){
if(!$("ul li:first",dom_this).is(":animated")){
rightani();
}
})
}
} ; (Here, negative margin-left is used to achieve movement.)
2. After the sliding is completed, insert this LI into the last LI (to achieve seamless scrolling)
Click on the right side --
1. Insert the last LI into the first of all LIs and position it outside the visible area (margin is used here)
 2. Then slide it into the visible area.
Note: The IF judgment statement here is to prevent bugs caused by continuously clicking the "left" or "right" button;
The meaning of this judgment: only when LI is not in animation state, Execute the move function. As long as it's animated, nothing happens when clicked.
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Tips and methods to achieve seamless scrolling effect with CSS Tips and methods to achieve seamless scrolling effect with CSS Oct 25, 2023 pm 12:31 PM

CSS techniques and methods to achieve seamless scrolling effects require specific code examples. With the development of Internet technology, seamless scrolling effects are widely used in web design. It can bring users a better browsing experience and can also increase the dynamics and visual effects of web pages. In this article, I will introduce several commonly used CSS techniques and methods to achieve seamless scrolling effects, and provide specific code examples. Use CSS Animation to Achieve Seamless Scroll Effect CSS animation is a simple and efficient way to achieve seamless scrolling effect. We can use @key

How to use CSS to create a seamless scrolling text carousel effect How to use CSS to create a seamless scrolling text carousel effect Oct 25, 2023 am 10:24 AM

How to use CSS to create a seamless scrolling text carousel effect requires specific code examples. With the development of the Internet and designers' increasing requirements for user experience, the text carousel effect on websites has become one of the common display forms. Text carousels can attract users' attention, increase the dynamics and vitality of the page, and increase users' attention to the content. In this article, I will introduce you to how to use CSS to create a seamless scrolling text carousel effect, and provide specific code examples. Before creating a seamless scrolling text carousel effect, I

How to use Vue to achieve seamless scrolling advertising effects How to use Vue to achieve seamless scrolling advertising effects Sep 21, 2023 am 11:24 AM

How to use Vue to implement seamless scrolling advertising effects In modern web design, seamless scrolling advertising effects have become very popular. This special effect can attract users' attention and display multiple advertising contents at the same time. Vue is a popular JavaScript framework that provides a simple and reliable way to achieve this effect. This article will show you how to use Vue to create a seamless scrolling ad effect and provide specific code examples. Step 1: Create a Vue component First, we need to create a Vue component to implement

Methods and techniques for achieving seamless scrolling news through pure CSS Methods and techniques for achieving seamless scrolling news through pure CSS Oct 19, 2023 am 10:46 AM

Methods and techniques on how to achieve seamless scrolling news through pure CSS. With the continuous development of Web technology, how to achieve some cool effects through CSS has become the pursuit of front-end developers. This article will introduce methods and techniques on how to achieve seamless scrolling news through pure CSS, and provide specific code examples. 1. Implementation ideas There are generally two ideas for implementing seamless scrolling news effects: using CSS animation and using the transform attribute of CSS3. Below we will introduce these two methods one by one. 1. Use CSS animation C

How to use CSS to create a seamless scrolling text display effect. How to use CSS to create a seamless scrolling text display effect. Oct 21, 2023 am 09:10 AM

Steps to implement how to use CSS to create a seamless scrolling text display effect. In web design, the seamless scrolling text display effect brings people a smoother and more attractive user experience. This effect is usually used in scenes such as carousels and scrolling news. This article will introduce specific steps to use CSS to achieve seamless scrolling text display effects, and provide relevant code examples. Step 1: Create the HTML structure First, we need to create a container element that contains the scrolling text. It can be div, ul or other HTM

How to use CSS to create a seamless scrolling image carousel effect How to use CSS to create a seamless scrolling image carousel effect Oct 20, 2023 pm 03:37 PM

How to use CSS to create a seamless scrolling image carousel effect. With the development of the Internet and people's pursuit of aesthetics, image carousels have become one of the common elements in web design. The seamless scrolling image carousel effect can attract users' attention and increase the interactivity and visual effect of the page. In this article, we will introduce how to use CSS to achieve a seamless scrolling image carousel effect, and provide specific code examples. First, we need to prepare some basic HTML structure. We can use a container containing multiple images and make

How to achieve seamless scrolling news notifications using HTML, CSS and jQuery How to achieve seamless scrolling news notifications using HTML, CSS and jQuery Oct 25, 2023 am 11:55 AM

How to use HTML, CSS and jQuery to implement seamless scrolling news notifications. In today's era of information explosion, news notifications have become one of the important ways for people to obtain instant information. News notification bars on web pages can attract users' attention and provide important and interesting content. This article will introduce how to use HTML, CSS and jQuery to implement a seamless scrolling news notification bar, with specific code examples. 1. HTML structure: In the HTML file, we first need to create a

How to use CSS to create a seamless scrolling image display bar effect How to use CSS to create a seamless scrolling image display bar effect Oct 16, 2023 am 08:09 AM

How to use CSS to create a seamless scrolling image display bar. With the development of the Internet, image display has become an indispensable part of many website designs. The seamless scrolling image display bar effect can attract users' attention and improve the visual effect and user experience of the website. In this article, I will introduce you to how to use CSS to achieve a seamless scrolling image display bar effect, and provide specific code examples. The effect of achieving seamless scrolling of the picture display bar mainly relies on the animation properties and layout of CSS. Here are the steps to achieve this effect

See all articles