jquery_jqueryに基づくシームレスループニュースリストプラグイン

1. レンダリング:

ヒント ソース コードのダウンロードhttp://xiazai.jb51.net/201103/yuanma/jquerynewslist.rar
2. jquery ソース コード:

コードをコピーします コードは次のとおりです:

(function ($){
$.fn.extend({
newsList:function(options){
var defaults ={
actName:'li', // の数を表示items;
maxShowNum:'6', //表示されるアイテムの最大数;
actNameH:'28', //一度に移動した距離
ulClass:'.ul_news_list', //コピーされたレイヤーのクラス
copyUlClass:'.ul_news_list2', //レイヤー クラスをコピー
autoTime:'1500', //自動実行時間
clickGoUpC:'.go_uplist', //クリック アップclass;
clickDownUpC:' .go_downlist', // クリックダウン class;
goStart:'go_tart',
autoCloss:'flase' // 'flase' の場合、自動実行スイッチ
} ;

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(),$(this));
// 関数を自動的に実行しますfunction auto_function(){
if(counts $(ul_class).animate({top:'-=' o.actNameH},o.autoTime); ).animate({top:'-=' o.actNameH},o.autoTime);
カウント ;
}else{
$(ul_class).animate({top:0},0) ;
$(copy_ul_class).animate( {top:0},0);
}
}
// クリックすると上に移動します。 (linum > o.maxShowNum){
$(click_go_up_c).click(function(){
if(counts $(ul_class).animate({top:'- =' o.actNameH},0);
$(copy_ul_class).animate({top:'-=' o.actNameH},0);
カウント ;
$ (ul_class).animate({top:0}, 0);
$(copy_ul_class).animate({top:0},0);
カウント = 1;
}) ;
}
//下に移動する場合はクリックします。
if(linum > o.maxShowNum){
$(click_go_down_C).click(function(){
if(counts >) ; 1){
カウント--;
$(ul_class).animate({top:'-' counts*o.actNameH},0); '-' counts*o.actNameH},0) ;
}else{
$(ul_class).animate({top:0},0); :0},0);
counts = linum 1;
}
//マウスが通過すると開始および停止します。 o.maxShowNum){
$(thiswrap) .hover(function(){
goStopList();
},function(){
goStartList();
}); >}
function goStartList(){
if(o.autoCloss === 'flase'){
go_start = setInterval(auto_function,o.autoTime)
}
}
関数 goStopList(){
clearInterval(go_start )
});
}
}); 🎜>
3. HTML:





コードをコピーします


コードは次のとおりです:

img src="images/newslist/goupbtn.gif" />スパン>

1. 唐山、文川、玉樹地震救助活動に参加した救助隊員唐山、文川、玉樹地震救助活動に参加していた/ li> ;

2. モロッコのセラで、ストリートチルドレンのためのストリートチルドレンのための募金活動を行うアーティストたち> ; li>

3. 昆明警察は最近、「紅興店県」の「興崗」の悪党組織が逮捕されたと報告しました... ;

4. インドのケッシュさんは、子供たちが暴動を起こしていることを知っていましたが、事故で亡くなったときは苦しみました。 ;曽は唐に参加し、救助に参加するために周曲に到着した

5. 明朝の昆明警察は最近、宣店県の暴力団「紅興ギャング」を壊滅させ、...

6. 唐に参加しました。唐に参加しました。

;7. 湖北省武漢の漢口はかつて唐の時代に参加し、二つの川の洪水のピークが通過するのを眺めました

;8.湖北省武漢漢曽は唐時代に参加しました

4 . CSS:

コードをコピーします。

コードは次のとおりです: body { font -family:"Microsoft Yahei",Arial,"Lucida Grande"、Verdana、Lucida; } *{ margin:0;} img { border:0 ;} .clear { clear:both;}

a { color:#000; text-decoration:none;}

a:hover { color:#EC6104; text-decoration:none;}
.undis { 表示:なし;}/*ニュース_リスト*/
.ニュース_リスト_バー { 位置:相対; 幅:168ピクセル; 背景:url(../images/slideshow2/v3_picture6)繰り返し-y;背景色:#F00;}
.ul_news_list,
.ul_news_list2{position:relative; list-style:none;}
.ul_news_list li,
.ul_news_list2 li {line -高さ:28px; 高さ:28px; オーバーフロー:非表示; ホワイトスペース:nowrap; パディング:0 20px;}
.ul_news_list li a,
.ul_news_list2 li a{ ;}
.go_upanddown {位置:絶対; マージン:-20px 0 0 500px;}
.go_upanddown スパン {padding-right:10px;}