1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery图片无缝滚动JS代码ul/li结构</title> 6 <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script> 7 <script> 8 //滚动 9 (function($){ 10 11 $.fn.kxbdMarquee = function(options){ 12 var opts = $.extend({},$.fn.kxbdMarquee.defaults, options); 13 14 return this.each(function(){ 15 var $marquee = $(this);//滚动元素容器 16 var _scrollObj = $marquee.get(0);//滚动元素容器DOM 17 var scrollW = $marquee.width();//滚动元素容器的宽度 18 var scrollH = $marquee.height();//滚动元素容器的高度 19 var $element = $marquee.children(); //滚动元素 20 var $kids = $element.children();//滚动子元素 21 var scrollSize=0;//滚动元素尺寸 22 var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型，1左右，0上下 23 24 //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度 25 $element.css(_type?'width':'height',10000); 26 //获取滚动元素的尺寸 27 if (opts.isEqual) { 28 scrollSize = $kids[_type?'outerWidth':'outerHeight']() * $kids.length; 29 }else{ 30 $kids.each(function(){ 31 scrollSize += $(this)[_type?'outerWidth':'outerHeight'](); 32 }); 33 } 34 //滚动元素总尺寸小于容器尺寸，不滚动 35 if (scrollSize<(_type?scrollW:scrollH)) return; 36 //克隆滚动子元素将其插入到滚动元素后，并设定滚动元素宽度 37 $element.append($kids.clone()).css(_type?'width':'height',scrollSize*2); 38 39 var numMoved = 0; 40 function scrollFunc(){ 41 var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop'; 42 if (opts.loop > 0) { 43 numMoved+=opts.scrollAmount; 44 if(numMoved>scrollSize*opts.loop){ 45 _scrollObj[_dir] = 0; 46 return clearInterval(moveId); 47 } 48 } 49 if(opts.direction == 'left' || opts.direction == 'up'){ 50 var newPos = _scrollObj[_dir] + opts.scrollAmount; 51 if(newPos>=scrollSize){ 52 newPos -= scrollSize; 53 } 54 _scrollObj[_dir] = newPos; 55 }else{ 56 var newPos = _scrollObj[_dir] - opts.scrollAmount; 57 if(newPos<=0){ 58 newPos += scrollSize; 59 } 60 _scrollObj[_dir] = newPos; 61 } 62 }; 63 //滚动开始 64 var moveId = setInterval(scrollFunc, opts.scrollDelay); 65 //鼠标划过停止滚动 66 $marquee.hover( 67 function(){ 68 clearInterval(moveId); 69 }, 70 function(){ 71 clearInterval(moveId); 72 moveId = setInterval(scrollFunc, opts.scrollDelay); 73 } 74 ); 75 76 //控制加速运动 77 if(opts.controlBtn){ 78 $.each(opts.controlBtn, function(i,val){ 79 $(val).bind(opts.eventA,function(){ 80 opts.direction = i; 81 opts.oldAmount = opts.scrollAmount; 82 opts.scrollAmount = opts.newAmount; 83 }).bind(opts.eventB,function(){ 84 opts.scrollAmount = opts.oldAmount; 85 }); 86 }); 87 } 88 }); 89 }; 90 $.fn.kxbdMarquee.defaults = { 91 isEqual:true,//所有滚动的元素长宽是否相等,true,false 92 loop: 0,//循环滚动次数，0时无限 93 direction: 'left',//滚动方向，'left','right','up','down' 94 scrollAmount:1,//步长 95 scrollDelay:10,//时长 96 newAmount:3,//加速滚动的步长 97 eventA:'mousedown',//鼠标事件，加速 98 eventB:'mouseup'//鼠标事件，原速 99 }; 100 101 $.fn.kxbdMarquee.setDefaults = function(settings) { 102 $.extend( $.fn.kxbdMarquee.defaults, settings ); 103 }; 104 105 })(jQuery); 106 107 </script> 108 <style> 109 a{ font-size:13px; color:#333333; text-decoration:none;} 110 a:hover{color:red; text-decoration:underline;} 111 img{ border:none;} 112 113 .marquee {width:560px;height:260px;overflow:hidden;border:1px solid #333; margin-top:20px;} 114 .marquee li{ display:inline; float:left; margin-right:12px;} 115 .marquee li a{ width:230px; height:260px; display:block; float:left; text-align:center; font-size:14px;} 116 .marquee li a:hove{ text-decoration:none;} 117 .marquee li img {width:160px; height:160px;} 118 .marquee li em{font-style: normal; height:24px; line-height:24px; display:block; margin-top:8px;} 119 </style> 120 </head> 121 122 <body> 123 <script type="text/javascript"> 124 $(document).ready(function(){ 125 $('.marquee').kxbdMarquee({ 126 direction:'left', 127 eventA:'mouseenter', 128 eventB:'mouseleave' 129 }); 130 }); 131 </script> 132 133 <div class="marquee"> 134 <ul> 135 <li><a href="#"><img src="demo/01.jpg"/><em>jquery 特效</em></a></li> 136 <li><a href="#"><img src="demo/02.jpg"/><em>滚动</em></a></li> 137 <li><a href="#"><img src="demo/01.jpg"/><em>导航</em></a></li> 138 <li><a href="#"><img src="demo/02.jpg"/><em>大全</em></a></li> 139 </ul> 140 </div> 141 </body> 142 </html>
