Jquery-Based Seamless loop News list plug-in. For more information, see.
I ,:
Tips source download http://xiazai.jb51.net/201103/yuanma/jquerynewslist.rar
Ii. jquery source code:
The Code is as follows:
(Function ($ ){
$. Fn. extend ({
NewsList: function (options ){
Var defaults = {
ActName: 'lil', // display the number of entries;
MaxShowNum: '6', // maximum number of entries displayed;
ActNameH: '28', // distance of one movement;
UlClass: '. ul_news_list', // class of the copied Layer
CopyUlClass: '. ul_news_list2', // copy layer class
AutoTime: '20140901', // automatic running time;
ClickGoUpC: '. go_uplist', // click the upper class;
ClickDownUpC: '. go_downlist', // click down class;
GoStart: 'Go _ tart ',
AutoCloss: 'flase' // indicates the automatic operation switch. If it is set to 'flase', it is enabled. If it is set to other, It is disabled;
};
Options = $. extend (defaults, options );
Return this. each (function (){
Var o = options;
Var counts = 1;
Var linum = $ (this). find (o. actName), $ (this). size ();
Var ul_class =$ ($ (this). find (o. ulClass), $ (this ));
Var copy_ul_class =$ ($ (this). find (o. copyUlClass), $ (this ));
Var click_go_up_c =$ ($ (this). find (o. clickGoUpC), $ (this ));
Var click_go_down_C =$ ($ (this). find (o. clickDownUpC), $ (this ));
Var go_start = $ (this). find (o. goStart), $ (this ));
If (linum> o. maxShowNum ){
((Copy_ul_class).html((ul_class).html ());
GoStartList ();
}
Var thiswrap = $ (ul_class). parent (). parent (), $ (this ));
// Automatically run the Function
Function auto_function (){
If (counts <= linum ){
$ (Ul_class). animate ({top: '-=' + o. actNameH}, o. autoTime );
$ (Copy_ul_class). animate ({top: '-=' + o. actNameH}, o. autoTime );
Counts ++;
} Else {
$ (Ul_class). animate ({top: 0}, 0 );
$ (Copy_ul_class). animate ({top: 0}, 0 );
Counts = 1;
}
}
// Click to move up;
If (linum> o. maxShowNum ){
$ (Click_go_up_c). click (function (){
If (counts <= linum ){
$ (Ul_class). animate ({top: '-=' + o. actNameH}, 0 );
$ (Copy_ul_class). animate ({top: '-=' + o. actNameH}, 0 );
Counts ++;
} Else {
$ (Ul_class). animate ({top: 0}, 0 );
$ (Copy_ul_class). animate ({top: 0}, 0 );
Counts = 1;
}
});
}
// Click to move down;
If (linum> o. maxShowNum ){
$ (Click_go_down_C). click (function (){
If (counts> 1 ){
Counts --;
$ (Ul_class). animate ({top: '-' + counts * o. actNameH}, 0 );
$ (Copy_ul_class). animate ({top: '-' + counts * o. actNameH}, 0 );
} Else {
$ (Ul_class). animate ({top: 0}, 0 );
$ (Copy_ul_class). animate ({top: 0}, 0 );
Counts = linum + 1;
}
});
}
// Start and stop when the mouse goes through;
If (linum> o. maxShowNum ){
$ (Thiswrap). hover (function (){
GoStopList ();
}, Function (){
GoStartList ();
});
}
Function goStartList (){
If (o. autoCloss === 'flase '){
Go_start = setInterval (auto_function, o. autoTime );
}
}
Function goStopList (){
ClearInterval (go_start );
}
});
}
});
} (JQuery ));
3. HTML:
The Code is as follows: