Seamless loop news list plug-in based on jquery_jquery

1. Rendering:

tips source code downloadhttp://xiazai.jb51.net/201103/yuanma/jquerynewslist.rar
2. jquery source code:

Copy code The code is as follows:

(function ($){
$.fn.extend({
newsList:function(options){
var defaults ={
actName:'li', //Display the number of items;
maxShowNum:'6', //The maximum number of displayed items;
actNameH:'28', //The distance moved at one time;
ulClass:'.ul_news_list', //The class of the copied layer
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' //Auto-run switch, when it is 'flase', it is on, otherwise it 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));
//Automatically 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;
}
}
//When clicking 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 When moving 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 passes;
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:

Copy code The code is as follows:

< img src="images/newslist/goupbtn.gif" />

• 1. The rescuers who participated in the Tangshan, Wenchuan, and Yushu earthquake rescuehad participated in the Tangshan, Wenchuan, and Yushu earthquake rescue operations
• 2. Serra, Morocco, artists performed in a circus show to raise funds for street children for street children for street children
  
• 3. Kunming police recently reported that "Hongxingdian County's" Hongxingdian County's "Hongxingdian County" "Xinggang" evil gang, seized...


• 4. India's Kesh knew his children were rioting When he was killed in the accident, he was in agony..Zeng participated in the Tang Dynasty and arrived in Zhouqu to participate in the rescue

5. Kunming police in Ming Dynasty recently destroyed the "Hongxing Gang" gang in Xundian County and seized...

• 6. Have participated in Tang. Have participated in Tang. Have participated in Tang. Have participated in Tang.


• < ;a href="#">7. Hankou, Wuhan, Hubei, once participated in the Tang Dynasty, watched the flood peaks of the two rivers pass

< li>8. Hubei Wuhan Han Zeng participated in the Tang Dynasty. Zeng participated in the Tang Dynasty. Zeng participated in the Tang Dynasty. Watched the Tang Dynasty by the river

4. CSS:

Copy code The code is as follows:

body { font-family:"Microsoft Yahei",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;}