Online demo: http://demo.jb51.net/js/2012/myslideLeftRight/
Package download: http://www.jb51.net/jiaoben/44973.html
Core code:
(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.