jQuery实现文字滚动、带左右上下按钮、图片及文字自动播放

/*
 * jQuery JavaScript Library Marquee Plus 1.0
 * author : tugenhua
 * Dual licensed under the MIT and GPL licenses.
 *QQ : 807287699
 * Date: 2011-9-2 19:50:21
 **********************************************************************
 * @example
 * $("#example").XYMarquee({
 *        next :"next",
 *        prev :"prev"                        
 *  })
 **********************************************************************
 *jMarquee o参数可配置项：
 *___direction : left || top,设置滚动方向，(向左或向上)默认向左滚动;
 * ___btnNext : 下翻页的ID名称;
 *  ___btnPrev : 上翻页的ID名称;
 *    ___auto : 布尔值(true为自动滚动，false为手动滚动，默认true);
 *     ___item :设置每次滚动元素的个数(默认滚动所有可见部分);
 *    ___speed :设置每次滚动动画执行时间(单位毫秒，默认为1000)；
 *     ___time :设置每次动画执行间隔时间(单位毫秒，默认为3000)；
 **********************************************************************
 *完整的html代码结构：
 *

 **********************************************************************/
;(function($) {
    $.fn.extend({
        XYMarquee: function(o){
var defaults = {
    ___direction:"left",
___btnNext: "prev",
___btnPrev: "next",
___auto: true,
___item: null,
___speed: "1000",
___time: "3000"
};
var o = $.extend(defaults, o);
return this.each(function() {
var timer;
var marquee = true,___self = $(this),$wrap = $("div",___self),$parent = $("li", $wrap).parent();
    var count = o.___direction=="left" ?Math.floor($wrap.width() / $("li",$wrap).outerWidth()):Math.floor($wrap.height() / $("li",$wrap).outerHeight());
    if(o.___item){count = o.___item;}
    if(o.___direction=="left"){
     $parent.css("width", $wrap.width() *2 + "px");
    }else{
     $parent.css("height", $wrap.height()* 2 + "px");
    }
    $wrap.css("overflow", "hidden");
    var $value = o.___direction=="left" ?$("li", $wrap).outerWidth() * count : $("li", $wrap).outerHeight()* count;
    function scrollNext() {
     if (marquee) {
      marquee = false;
      if(o.___direction=="left"){
       $parent.animate({
        marginLeft:-$value
       },
       o.___speed,
       function() {
        var $tempwrap =$("li", $wrap).slice(0, count);
        $parent.append($tempwrap);
        $parent.css("marginLeft",0);
        marquee = true;
       });
      }else{
       $parent.animate({
        marginTop:-$value
       },
       o.___speed,
       function() {
        var $tempwrap =$("li", $wrap).slice(0, count);
        $parent.append($tempwrap);
        $parent.css("marginTop",0);
        marquee = true;
       });
      }
     }
    };
    function scrollPrev() {
     if (marquee) {
      var $tempwrap = $("li",$wrap).slice( - count);
      marquee = false;
      $parent.prepend($tempwrap);
      if(o.___direction=="left"){
       $parent.css("marginLeft",-$value);
       $parent.animate({
        marginLeft: 0
       },
       o.___speed,
       function() {
        marquee = true;
       });
      }else{
       $parent.css("marginTop",-$value);
       $parent.animate({
        marginTop: 0
       },
       o.___speed,
       function() {
        marquee = true;
       });
      }
     }
    };
function stopMarquee() {
clearInterval(timer);
}
function autoPlay() {
timer = setInterval(scrollNext, o.___time);
}
if (o.___auto) {
$wrap.hover(function() {
stopMarquee();
},function() {
autoPlay();
});
$("#" + o.___btnPrev, ___self).hover(function() {
stopMarquee();
},function() {
autoPlay();
});
$("#" + o.___btnNext, ___self).hover(function() {
stopMarquee();
},function() {
autoPlay();
});
autoPlay();
}
$("#" + o.___btnPrev, ___self).click(scrollPrev);
$("#" + o.___btnNext, ___self).click(scrollNext);
});
}           
    });
})(jQuery);

HTML调用方式：

 《script》
 $(function(){
  $("#demo1").XYMarquee({
   ___direction:'up',
   ___item:"1"
  });
  $("#demo2").XYMarquee({
   ___direction:'left',
   ___item:"1"
  });
  $("#demo3").XYMarquee({
   ___direction:'left',
   ___btnNext : "next",
   ___btnPrev : "prev",
   ___auto : false,
   ___item:"3"
  });
  $("#demo4").XYMarquee({
   ___direction:'up',
   ___item:"1"
  });
  $("#demo5").XYMarquee({
   ___direction:'up',
   ___btnNext : "next",
   ___btnPrev : "prev",
   ___auto : false,
   ___item:"3"
  });
 }); 
《script》

今天做淘宝页面时候用了一下这个组件 发现有个小bug问题 比如说效果如下：

如果图片只有这三个的话在另外一边的按钮有个bug  就是不均匀的移动  所以在以后中一定要注意 一定要大于这三张图片在各个游览器中没有问题 因为这个代码不像其他的网站一样在用firbug查看代码时候 会有js自动生成双倍的li 比如页面有六个 在firebug看时候有十二个  而我这个没有 他只是用js控制了 如果他的li长度大于页面上显示的长度的话那么他就能很好的移动 否则的话 就有一个小bug