コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jquery_jqueryに基づくシームレスループニュースリストプラグイン

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

WBOY
リリース： 2016-05-16 18:09:47
オリジナル
1124 人が閲覧しました
1. レンダリング:
jquery_jqueryに基づくシームレスループニュースリストプラグイン
ヒント ソース コードのダウンロード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 <= linum){
$(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 <= linum){
$(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:





コードをコピーします


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




コードをコピーします。
コードは次のとおりです: 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;}

関連ラベル：
シームレスなループ
ソース：php.cn
前の記事：DIV を常に画面の中央、左下、左上、右上、右下に配置するための JS CSS コード集_JavaScript スキル 次の記事：Divコードを常に画面中央に表示する(css js)_javascript Tips
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ループするために MySQL の結果を ID ごとにグループ化する mysqlにフライトデータを含むテーブルがあります。 codeigniter3Journey_idair_idFlightDurationout_or_inflightdurati...
から 2024-04-06 17:27:56
0
1
406
for ループはランダムに 1 から 0 まで変化します 基本的に、ページが更新されるたびに、for ループは 1 から 0 に変化する可能性があります。なぜこのようなことが起こるのかはわかりませんが、画像を重ね合わせる方法に影響します。...
から 2024-04-06 16:48:14
0
1
393
無限ループを作成せずに useEffect で React コンポーネントの依存関係を更新する方法 保存された値 (メンバー) が更新されるまで待機し、保存された値を設定する前に条件に基づいてメンバーを削除する必要がある React コンポーネントがあります。ただし、これでは明ら...
から 2024-04-05 14:31:46
0
1
1383
この htaccess リダイレクトを実装できません Web サイトを含む maindomain.com を持っています。ここのいくつかのページは一時的にサブドメイン tmp.maindomain.com にリダイレクトされる必要があ...
から 2024-04-04 23:43:51
0
1
1376
SCSS(SASS)のforループ(001~100)でクラス名の数を3桁までカウントする $i を「3 桁」にコンパイルするにはどうすればよいですか? @for$iffrom1through100{.bg-image#{$i}{background-image:url(...
から 2024-04-04 17:25:46
0
1
367
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート