Jquery-Based Seamless loop News list plug-in _ jquery

Source: Internet
Author: User
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:


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.