jq 自动滑动轮换（向后插入小块）

// JavaScript Documentvar Marquee = { arrIdObj : {/*marqueebox : {distance:-95,//移动距离delay:3000,//延迟时间speed:1000//移动时间},minCount:2 */}, //创建对象 startMarquee:function(){ //给参数赋值 if(this.arrIdObj != null && typeof this.arrIdObj === "object"){ for(var p in this.arrIdObj){ var obj = new classMarquee(document.getElementById(p),this.arrIdObj[p]); } }else{return null;} function classMarquee(objElem,params){ var $objElem = $(objElem); var Mparams = params; //至少多少个 if(params.minCount > $(objElem).children().length){return null;} //初始化 var t; var b = false; $objElem.mouseover(function(){b = true;}); $objElem.mouseout(function(){b = false;}); function start(){ $objElem.css("margin-top","0"); t = setTimeout(scrolling,Mparams.delay); } function scrolling(){ if(!b){ var styleVal = Mparams.distance +"px"; $objElem.animate({"margin-top":styleVal},Mparams.speed,"linear",function(){ $objElem.append($objElem.children()[0]); start(); }); }else{ start(); } } start(); } }}

//自定义部分Marquee.arrIdObj ={ marqueebox : { distance:-95,//移动距离 delay:3000,//延迟时间 speed:1000,//移动时间 minCount:5 }, marqueebox1:{ distance:-121,//移动距离 delay:3000,//延迟时间 speed:1000,//移动时间 minCount:2 }}Marquee.startMarquee();

 

<ul id="marqueebox"><li></li><li></li><li></li><li></li><li></li></ul>

<ul id="marqueebox1"><li></li><li></li><li></li></ul>

转载于:https://www.cnblogs.com/mengwei-ziyun/p/5605811.html