A seamless cyclic news list plugin based on jquery _jquery

one, the effect chart:

Tips Source Download Http://xiazai.jb51.net/201103/yuanma/jquerynewslist.rar
Second, jquery Source:

Copy Code code as follows:

(function ($) {
$.fn.extend ({
Newslist:function (options) {
var defaults ={
Actname: ' Li ',//display the number of bars;
Maxshownum: ' 6 ',//maximum number of display bars;
Actnameh: ' 28 ',//The distance of a move;
Ulclass: '. Ul_news_list ',//Duplicated layer class
Copyulclass: '. Ul_news_list2 ',//Copy layer class
Autotime: ' 1500 ',//automatic running time;
CLICKGOUPC: '. Go_uplist ',//click Up class;
CLICKDOWNUPC: '. Go_downlist ',//Click Down class;
Gostart: ' Go_tart ',
Autocloss: ' flase '//automatic operation switch, when for ' flase ', the other is off;
} ;

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));
Auto Run 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;
}
});
}
The mouse stops after the start of the event;
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));

Third, HTML:

Copy Code code as follows:

<script language= "JavaScript" >
$ (document). Ready (function () {
$ ("#newslist"). Newslist ();
});
</script>

<div id= "Newslist" >
<div class= "Go_upanddown" ><span class= "go_uplist" ></ Span><span class= "go_downlist" ></span></div >
<div class= "News_list_bar" >
<ul class= "Ul_news_list" >
<li><a href= "#" >1, has participated in Tangshan, Wenchuan, Yushu earthquake relief </a><a href= "#" > had participated in Tang, and came to Zhouqu to participate in rescue </a></li >
<li><a href= "#" >2, Moroccan Sylar, the artist performs </a></li> in a circus show for homeless children for street children for street children
<li><a href= "#" >3, Kunming police recently county, "Hongxing Dian County," Hongxing Dian County, "Hongxing Dian County," hongxing to help the gang, seized ...</a></li>
<li><a href= "#" >4, India Kersh know that their children were killed in the riots in agony. </a><a href= "#" > had participated in Tang had attended the Tang to Zhouqu to participate in rescue </a></li>
<li><a href= "#" >5, Ming Kunming Police recently smashed the Xundian County "hongxing gang" mafia, seized ...</a></li>
<li><a href= "#" >6, has participated in Tang has participated in Tang has participated in Tang has participated in the Don </a></li>
<li><a href= "#" >7, Hankou, Hankou, Wuhan, Hubei had participated in Tang had participated in Tang had participated in Tang to watch the river flood peak </a></li>
<li><a href= "#" >8, Hubei Wuhan Han had participated in Tang had participated in Tang had participated in the Tang had participated in Tang View </a></li> in Riverside
<li><a href= "#" >9, Hubei Wuhan Hankou, Hankou Dragon Temple Scenic Platform, the public gathered at the Riverside to watch the rivers flood peak Han </a></li>
</ul>
<ul class= "Ul_news_list2" ></ul>
</div>
</div>

Four, CSS:

Copy Code code as follows:

Body {font-family: "Microsoft Ya-Black", Arial, "Lucida Grande", Verdana, Lucida; font-size : 12px;
*{padding:0; margin:0;}
img {border:0;}
. Clear {Clear:both;}
A {color: #000; text-decoration:none;}
A:hover {color: #EC6104; text-decoration:none;}
. Undis {Display:none} /*news_list*/
. news_list_bar {position:relative; width:560px; height:168px; overflow:hidden; Background:url (. /images/slideshow2/v3_picture6.gif) repeat-y; Background-color: #F00;}
. Ul_news_list,
. ul_news_list2{position:relative; list-style:none;}
. Ul_news_list Li,
. Ul_news_list2 li{line-height:28px; height:28px; width:500px; overflow:hidden; White-space: nowrap;padding:0 20px;}
. Ul_news_list Li A,
. ul_news_list2 Li a{padding-right:20px;
. go_upanddown {position:absolute; margin:-20px 0 0 500px;}
. Go_upanddown span {padding-right:10px; Cursor:pointer}