1.給圖文設置自定義class名[ MsSlide]() 2.關閉默認動畫并添加內容超過容器 ``` <style> .MsSlide {height:400px;overflow:hidden;} .MsSlide{ padding:0 45px; border: 1px solid #32b16c; border-radius: 15px;} </style> <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:30,//時長 newAmount:3,//加速滾動的步長 eventA:'mousedown',//鼠標事件，加速 eventB:'mouseup'//鼠標事件，原速 }; $.fn.kxbdMarquee.setDefaults = function(settings) { $.extend( $.fn.kxbdMarquee.defaults, settings ); }; })(jQuery); $(document).ready(function(){ $('.MsSlide').kxbdMarquee({ direction:'up', eventA:'mouseenter', eventB:'mouseleave' }); }); </script> ```