jquery實現頁面百葉窗走馬燈式翻滾顯示效果的有效方法

1. 這裏的代碼需要jquery1.3以上的.支持，如下所示：

複製代碼 代碼如下:nd((

function($){

var l = 4,//捲動行數

t=5000,//捲動完一次後，隔多長時間下次開始捲動

rt=500,//每個n捲動過去的耗時

n="li",//默認的捲動對象內包含的要捲動的HTML標記

o="ul",//如果捲動時，啟用的包裹捲動元素的HTML標記

e,//調用對象

en,//調用對象內所有的要捲動的對象集合

h;//捲動行高度

var vLimit=80;//比視覺極限0.1s還小點

var maxRnum=(rt/vLimit);//最大卷動次數

var maxRh=0;//每次捲動高度

var fnRollFirst=function(arg){//將arg向上卷1個n，完成之後將第1個n移動到最後一個位置

var rCount=0;//捲動次數紀錄

var rVal=setInterval(function(){//每隔vLimit循環一次，共循環maxRnum-1次

rCount++;

llTop(llTop()+maxRh);

if(rCount>=(maxRnum-1)){//少卷1次

clearInterval(rVal);

llTop(llTop()+h-maxRh*(maxRnum-1));//最後1次修正捲動值

//移動第一個元素到最後

var nowN=dren(n);

(th-1)r((0));

//第一個位置空出後需要通過倒卷修正回來

llTop(-h);

};

},vLimit);

};

var fnRollArr=function(arg){//對數組中的對象逐一啟動捲動

var out=setInterval(function(){

fnRollFirst(t());

if(!th){

clearInterval(out);

};

},rt);

};

var fnRoll=function(){//獲得需要逐個捲動的對象集合

var arr=new Array();

dren(o)(function(){

var rn=$(this)dren(n);

if(th>1){

($(this));

};

});

setInterval(function(){

fnRollArr(e(0));

},t);

};

var fnLay=function(){//佈局頁面

h=ht();

var nu=(th/l);

var u=$("<"+o+">");

({"overflow":"hidden","height":h+"px","margin-bottom":"15px"});

for(var i=0;i<l;i++){

e(nu*i,nu*(i+1))All(u);

};

};

var fnMain=function(){//捲動主方法

if(maxRnum>1){

fnLay();

maxRh=(h/maxRnum);

fnRoll();

};

};

var fnStart= function(arg){//初始化顯示方式

e=arg;

en = dren(n);

();

if(th>l){

fnMain();

}else{

return false;

};

};

return {

setLine : function(num){//設置要分成多少行來捲動

(!isNaN(num) && num>0)";

return this;

},

setTime : function(num){//捲動間隔時間:毫秒

(!isNaN(num) && num>0)";

return this;

},

startRoll : function(){//啟動捲動

fnStart(this);

}

};

}

)(jQuery));

2. 頁面可以是這樣子

複製代碼 代碼如下:

//$("#re")ine(5)ime(3000)tRoll();

//簡單的調用

$("#re")tRoll();