在线演示：http://demo.jb51.net/js/2012/myslideleftright/
打包下载：http://www.jb51.net/jiaoben/44973.html
核心代码:
复制代码 代码如下:
(function($){
$.fn.extend({
slidelf:function(value){
value = $.extend({
prev:,
next:,
speed:
},value)
var dom_this = $(this).get(0); //将jquery对象转换成dom对象;以便其它函数中调用；
var marginl = parseint($(ul li:first,this).css(margin-left)); //每个图片margin的数值
var movew = $(ul li:first,this).outerwidth()+marginl; //需要滑动的数值
//左边的动画
function leftani(){
$(ul li:first,dom_this).animate({margin-left:-movew},value.speed,function(){
$(this).css(margin-left,marginl).appendto($(ul,dom_this));
});
}
//右边的动画
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);
}
//点击左边
$(.+value.prev).click(function(){
if(!$(ul li:first,dom_this).is(:animated)){
leftani();
}
});
//点击左边
$(.+value.next).click(function(){
if(!$(ul li:first,dom_this).is(:animated)){
rightani();
}
})
}
});
})(jquery)
思路：
点击左边--
1.将第一个li向左滑动，滑动的数值就是li的宽度。（这里是用负margin-left来实现移动。）
2.滑动完成后，将这个li插入到整个li的最后一个（实现无缝滚动）
点击右边--
1.将最后一个li插入到所有li的第一个，并将其定位到可见区域之外，（这里用的是margin）
2.再将其滑动到可见区域。
注意：这里的if判断语句，是为了防止连续点击“左”或“右”的铵钮，而出现的bug；
这判断的意思：只有当li不处于动画状态时，才执行移动函数。只要处于动画状态，点击时，任何事都不发生。