基于jQuery图片平滑连续滚动插件

今天看到一个滚动的jquery插件感觉挺好，所以拿过来备用。

/* 彦磊基于jQuery图片平滑滚动插件(2009.04)* 在IE6/IE7/Mozilla 5.0（Firefox 3.0.5）中测试通过*** 此插件要求运行在jQuery v1.2 或更高版本上* 插件可以实现图片平滑向上或向左滚动* 如果您需要更多的效果或在使用中本插件存在BUG，可以给在彦磊的博客上留言，彦磊将尽自己最大努力完善此插件* 您留言前请先到：http://gmarwaha.com/jquery/jcarousellite/ 上面下载jcarousellite插件　* 来和彦磊图片平滑滚动的插件相互补充使用以获取更多的图片效果* 彦磊图片平滑滚动插件只是对jcarousellite插件的补充*** 技术支持：HTTP://HI.BAIDU.COM/DPXDQX* 此为自由拷贝版本，您可以在此基础上添加任何功能* 彦磊建议您将修改过的版本或发布地址发到彦磊博客上以共享，也建议您保留部分彦磊的信息*** 此插件没有象jcarousellite插件样对相关元素的CSS全自动设置，部分CSS样式需要您为设置* 原因很简单：您需要考虑部分用户的浏览器不支持JAVASCRIPT或相关功能被禁用* 您需要让您的页面元素布局在此时也能显示正确，因此必要的CSS设置还需要您自己来做。** 使用前您一定要引入jQurey及本脚本,如*  <script type="text/javascript" src="js/jquery_last.js"></script>*  <script type="text/javascript" src="js/YlMarquee.js">* 使用方法：** 1、为您要设置滚动的对象设置容器，并命名class，如class="ylMarquee"* 2、将您要滚动的对象置入<ul></ul>中，并添加li标签，li标签中可以是图片、文字或表格……* 3、此版本需要您设置每个li列表的宽度或高度一至*  <div class="stroll">*     <ul>*          <li><img src="image/1.jpg" alt="1"></li>*          <li><img src="image/2.jpg" alt="2"></li>*          <li><img src="image/3.jpg" alt="3"></li>*      </ul>*  </div>* 4、设置ylMarquee的height或width样式——向上滚动必须设置height的大小，向左滚动必须设置width的大小，否则页面将显示不正常。* 5、在页面中添加jQuery语句，调用此插件，并对相关参数进行设置,如：* <script type="text/javascript">* $(document).ready(function(){*  $(".stroll").jMarquee({*     visible:3,*     step:1,*     direction:"left"*   });*});* </script>* 6、插件相关参数：* visible:页面可见元素（图片）个数，默认为1，必须参数。* step:滚动步长，整数，默认为1，增大此数可加快滚动速度，设为0，则不进行滚动。* direction:滚动方向，有"left"（向左滚动）和"up"（向上滚动）两个参数，注意设置时一定要加英文的双引("")号或单引号('')。*/(function($) {$.fn.jMarquee = function(o) {o = $.extend({speed:30,step:1,//滚动步长direction:"up",//滚动方向visible:1//可见元素数量}, o || {});//获取滚动内容内各元素相关信息var i=0;var div=$(this);var ul=$("ul",div);var tli=$("li",ul);var liSize=tli.size();if(o.direction=="left")tli.css("float","left");var liWidth=tli.innerWidth();var liHeight=tli.height();var ulHeight=liHeight*liSize;var ulWidth=liWidth*liSize;//如果对象元素个数大于指定的显示元素则进行滚动，否则不滚动。if(liSize>o.visible){ul.append(tli.slice(0,o.visible).clone())  //复制前o.visible个li，并添加到ul的最后li=$("li",ul);liSize=li.size();//给滚动内容添加相关CSS样式div.css({"position":"relative",overflow:"hidden"});ul.css({"position":"relative",margin:"0",padding:"0","list-style":"none"});li.css({margin:"0",padding:"0","position":"relative"});switch(o.direction){case "left":div.css("width",(liWidth*o.visible)+"px");ul.css("width",(liWidth*liSize)+"px");li.css("float","left");break;case "up":div.css({"height":(liHeight*o.visible)+"px"});ul.css("height",(liHeight*liSize)+"px");break;}var MyMar=setInterval(ylMarquee,o.speed);ul.hover(function(){clearInterval(MyMar);},function(){MyMar=setInterval(ylMarquee,o.speed);});};function ylMarquee(){if(o.direction=="left"){if(div.scrollLeft()>=ulWidth){div.scrollLeft(0);}else{var leftNum=div.scrollLeft();leftNum+=parseInt(o.step);div.scrollLeft(leftNum)}}if(o.direction=="up"){if(div.scrollTop()>=ulHeight){div.scrollTop(0);}else{var topNum=div.scrollTop();topNum+=parseInt(o.step);div.scrollTop(topNum);}}};};})(jQuery);