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

WBOY
Release: 2016-05-16 17:53:27
Original
1142 people have browsed it

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.
Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template