jQuery-插件-图片左右无缝滚动

(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不处于动画状态时，才执行移动函数。只要处于动画状态，点击时，任何事都不发生。

 

 

下载DEMO