欢迎来到Java学习网!
设为首页 | 加入收藏
当前位置: 首页 > Java语言 > jQuery教程 >
jQuery图片左右滚动插件代码

Javascript代码:

(function($) {   
     $.fn.extend({   
           roll: function(options) {   
                 var defaults = {speed:1};  
                 var options = $.extend(defaults, options);  
                 var speed=(document.all) ? options.speed : Math.max(1,options.speed-1);  
                 var $container = $(this).parent();  
                 var $content = $(this);  
                  
                 var init_left = $content.position().left;  
                 $content.css({left:parseInt(init_left) + "px"});  
                 var self = this;  
                 var time = setInterval(function(){self.move($container,$content,speed,options);},20);   
                 $container.bind("mouseover",function(){  
                    clearInterval(time);  
                 });  
                 $container.bind("mouseout",function(){  
                    time = setInterval(function(){self.move($container,$content,speed,options);},20);  
                 });  
                 return this;     
           },  
          move:function($container,$content,speed,options){  
                var container_width = $container.width();  
                var content_width = $content.width();  
                if(options.direction == 'left'){  
                   if (parseInt($content.css("left")) + content_width > 0){  
                        $content.css({left:parseInt($content.css("left")) - speed + "px"});  
                    } else {  
                        $content.css({left:parseInt(container_width-content_width-10) + "px"});  
                    }  
                }else if(options.direction == 'right'){  
                    if(parseInt($content.css("left")) < container_width){  
                        $content.css({left:parseInt($content.css("left")) + speed + "px"});  
                    }else{  
                        $content.css({left:parseInt(0) + "px"});  
                    }  
                }  
                 
                  
                  
          }  
     });  
})(jQuery);

使用方法如下:

Javascript代码:$(".scroll").roll({speed:2,direction:'left'}); 

    相关教程
    推荐内容