jQuery图片无缝滚动JS代码ul/li结构

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery图片无缝滚动JS代码ul/li结构</title>
 <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
 <script>
 //滚动
 (function($){

     $.fn.kxbdMarquee = function(options){
         var opts = $.extend({},$.fn.kxbdMarquee.defaults, options);

         return this.each(function(){
             var $marquee = $(this);//滚动元素容器
             var _scrollObj = $marquee.get(0);//滚动元素容器DOM
             var scrollW = $marquee.width();//滚动元素容器的宽度
             var scrollH = $marquee.height();//滚动元素容器的高度
             var $element = $marquee.children(); //滚动元素
             var $kids = $element.children();//滚动子元素
             var scrollSize=0;//滚动元素尺寸
             var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型，1左右，0上下

             //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
             $element.css(_type?'width':'height',10000);
             //获取滚动元素的尺寸
             if (opts.isEqual) {
                 scrollSize = $kids[_type?'outerWidth':'outerHeight']() * $kids.length;
             }else{
                 $kids.each(function(){
                     scrollSize += $(this)[_type?'outerWidth':'outerHeight']();
                 });
             }
             //滚动元素总尺寸小于容器尺寸，不滚动
             if (scrollSize<(_type?scrollW:scrollH)) return;
             //克隆滚动子元素将其插入到滚动元素后，并设定滚动元素宽度
             $element.append($kids.clone()).css(_type?'width':'height',scrollSize*2);

             var numMoved = 0;
             function scrollFunc(){
                 var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';
                 if (opts.loop > 0) {
                     numMoved+=opts.scrollAmount;
                     if(numMoved>scrollSize*opts.loop){
                         _scrollObj[_dir] = 0;
                         return clearInterval(moveId);
                     }
                 }
                 if(opts.direction == 'left' || opts.direction == 'up'){
                     var newPos = _scrollObj[_dir] + opts.scrollAmount;
                     if(newPos>=scrollSize){
                         newPos -= scrollSize;
                     }
                     _scrollObj[_dir] = newPos;
                 }else{
                     var newPos = _scrollObj[_dir] - opts.scrollAmount;
                     if(newPos<=0){
                         newPos += scrollSize;
                     }
                     _scrollObj[_dir] = newPos;
                 }
             };
             //滚动开始
             var moveId = setInterval(scrollFunc, opts.scrollDelay);
             //鼠标划过停止滚动
             $marquee.hover(
                 function(){
                     clearInterval(moveId);
                 },
                 function(){
                     clearInterval(moveId);
                     moveId = setInterval(scrollFunc, opts.scrollDelay);
                 }
             );

             //控制加速运动
             if(opts.controlBtn){
                 $.each(opts.controlBtn, function(i,val){
                     $(val).bind(opts.eventA,function(){
                         opts.direction = i;
                         opts.oldAmount = opts.scrollAmount;
                         opts.scrollAmount = opts.newAmount;
                     }).bind(opts.eventB,function(){
                         opts.scrollAmount = opts.oldAmount;
                     });
                 });
             }
         });
     };
     $.fn.kxbdMarquee.defaults = {
         isEqual:true,//所有滚动的元素长宽是否相等,true,false
         loop: 0,//循环滚动次数，0时无限
         direction: 'left',//滚动方向，'left','right','up','down'
         scrollAmount:1,//步长
         scrollDelay:10,//时长
         newAmount:3,//加速滚动的步长
         eventA:'mousedown',//鼠标事件，加速
         eventB:'mouseup'//鼠标事件，原速
     };

     $.fn.kxbdMarquee.setDefaults = function(settings) {
         $.extend( $.fn.kxbdMarquee.defaults, settings );
     };

 })(jQuery);

 </script>
 <style>
 a{ font-size:13px; color:#333333; text-decoration:none;}
 a:hover{color:red; text-decoration:underline;}
 img{ border:none;}

 .marquee {width:560px;height:260px;overflow:hidden;border:1px solid #333; margin-top:20px;}
 .marquee li{ display:inline; float:left; margin-right:12px;}
 .marquee li a{ width:230px; height:260px; display:block; float:left; text-align:center; font-size:14px;}
 .marquee li a:hove{ text-decoration:none;}
 .marquee li img {width:160px; height:160px;}
 .marquee li em{font-style: normal; height:24px; line-height:24px; display:block; margin-top:8px;}
 </style>
 </head>

 <body>
 <script type="text/javascript">
 $(document).ready(function(){
     $('.marquee').kxbdMarquee({
             direction:'left',
             eventA:'mouseenter',
             eventB:'mouseleave'
     });
 });
 </script> 

 <div class="marquee">
     <ul>
         <li><a href="#"><img src="demo/01.jpg"/><em>jquery 特效</em></a></li>
         <li><a href="#"><img src="demo/02.jpg"/><em>滚动</em></a></li>
         <li><a href="#"><img src="demo/01.jpg"/><em>导航</em></a></li>
         <li><a href="#"><img src="demo/02.jpg"/><em>大全</em></a></li>
     </ul>
 </div>
 </body>
 </html>