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

Posted 2020-07-28

// javascript Document
var 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>