基于jquery的無縫循環(huán)新聞列表插件
一、效果圖:
tips源碼下載 http://xiazai.jb51.net/201103/yuanma/jquerynewslist.rar
二、jquery源碼:
(function($){
$.fn.extend({
newsList:function(options){
var defaults ={
actName:'li', //顯示條數(shù)名;
maxShowNum:'6', //最多的顯示條數(shù);
actNameH:'28', //一次移動(dòng)的距離;
ulClass:'.ul_news_list', //被復(fù)制層的class
copyUlClass:'.ul_news_list2', //復(fù)制層的class
autoTime:'1500', //自動(dòng)運(yùn)行時(shí)間;
clickGoUpC:'.go_uplist', //點(diǎn)擊向上class;
clickDownUpC:'.go_downlist', //點(diǎn)擊向下class;
goStart:'go_tart',
autoCloss:'flase' //自動(dòng)運(yùn)行開關(guān),當(dāng)為'flase'時(shí)為開,其它則關(guān);
} ;
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));
//自動(dòng)運(yùn)行函數(shù)
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;
}
}
//點(diǎn)擊向上移動(dòng)時(shí);
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;
}
});
}
//點(diǎn)擊向下移動(dòng)時(shí);
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;
}
});
}
//鼠標(biāo)經(jīng)過所發(fā)生的開始停止;
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));
三、HTML:
<script language="javascript">
$(document).ready(function(){
$("#newslist").newsList();
});
</script>
<div id="newslist">
<div class="go_upanddown"><span class="go_uplist"><img src="images/newslist/goupbtn.gif" /></span><span class="go_downlist"><img src="images/newslist/godownbtn.gif" /></span></div>
<div class="news_list_bar">
<ul class="ul_news_list">
<li><a href="#">1、曾參加過唐山、汶川、玉樹地震救援的援</a><a href="#">曾參加過唐,又來到了舟曲參加救援</a></li>
<li><a href="#">2、摩洛哥塞拉,藝術(shù)家在一場(chǎng)為流浪兒童為流浪兒童為流浪兒童為流浪兒童募捐的馬戲節(jié)目中表演</a></li>
<li><a href="#">3、昆明警方近日縣的“洪興甸縣的“洪興甸縣的“洪興甸縣的“洪興幫”黑惡勢(shì)力團(tuán)伙,繳獲...</a></li>
<li><a href="#">4、印度克什知自己的孩子在亂中喪生時(shí)痛不欲生..</a><a href="#">曾參加過唐曾參加過唐到了舟曲參加救援</a></li>
<li><a href="#">5、明昆明警方近日搗毀了尋甸縣的“洪興幫”黑惡勢(shì)力團(tuán)伙,繳獲...</a></li>
<li><a href="#">6、曾參加過唐曾參加過唐曾參加過唐曾參加過唐</a></li>
<li><a href="#">7、湖北武漢漢口漢口曾參加過唐曾參加過唐曾參加過唐曾參加過唐觀看兩江洪峰過</a></li>
<li><a href="#">8、湖北武漢漢曾參加過唐曾參加過唐曾參加過唐曾參加過唐集在江邊觀</a></li>
<li><a href="#">9、湖北武漢漢口漢口龍王廟景區(qū)觀景平臺(tái)上,市民聚集在江邊觀看兩江洪峰過漢</a></li>
</ul>
<ul class="ul_news_list2"></ul>
</div>
</div>
四、CSS:
body { font-family:"微軟雅黑",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;}
相關(guān)文章
ajax異步刷新實(shí)現(xiàn)更新數(shù)據(jù)庫
下面寫關(guān)于如何把無刷新的數(shù)據(jù)寫入到數(shù)據(jù)庫中,需要的朋友可以參考下2012-12-12jQuery實(shí)現(xiàn)網(wǎng)頁頂部固定導(dǎo)航效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)網(wǎng)頁頂部固定導(dǎo)航效果代碼,涉及jQuery響應(yīng)scroll事件動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2015-12-12JQuery form表單提交前驗(yàn)證單選框是否選中、刪除記錄時(shí)驗(yàn)證經(jīng)驗(yàn)總結(jié)(整理)
這篇文章主要介紹了JQuery form表單提交前驗(yàn)證單選框是否選中、刪除記錄時(shí)驗(yàn)證經(jīng)驗(yàn)總結(jié),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-06-06使用jQuery動(dòng)態(tài)加載js腳本文件的方法
動(dòng)態(tài)加載Javascript是一項(xiàng)非常強(qiáng)大且有用的技術(shù)。這方面的主題在網(wǎng)上已經(jīng)討論了不少,我也經(jīng)常會(huì)在一些個(gè)人項(xiàng)目上使用RequireJS和Dojo加載js2014-04-04jQuery將表單序列化成一個(gè)Object對(duì)象的實(shí)例
下面小編就為大家?guī)硪黄猨Query將表單序列化成一個(gè)Object對(duì)象的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11ajax 文件上傳應(yīng)用簡(jiǎn)單實(shí)現(xiàn)
今天看到一個(gè)jquery插件jquery.fileupload.v.1.5.0,自己試著結(jié)合java做了一個(gè)ajax的文件上傳小應(yīng)用2009-03-03jQuery實(shí)現(xiàn)鼠標(biāo)滑過商品小圖片上顯示對(duì)應(yīng)大圖片功能【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑過商品小圖片上顯示對(duì)應(yīng)大圖片功能,涉及jQuery事件響應(yīng)、元素遍歷及屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果
這篇文章主要為大家詳細(xì)介紹了jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果,實(shí)現(xiàn)滑動(dòng)切換和點(diǎn)擊切換,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01