[转载]jquery插件之无缝循环新闻列表-Mikel

[转载]jquery插件之无缝循环新闻列表 – waitingbar – 博客园.

一、效果图：

tips源码下载：http://files.cnblogs.com/waitingbar/newslist.rar

二、JQuery源码:

01
(function($){

02
 $.fn.extend({

03
 newsList:function(options){

04
 var defaults ={

05
 actName:'li', //显示条数名；

06
 maxShowNum:'6', //最多的显示条数；

07
 actNameH:'28', //一次移动的距离；

08
 ulClass:'.ul_news_list', //被复制层的class

09
 copyUlClass:'.ul_news_list2', //复制层的class

10
 autoTime:'1500', //自动运行时间；

11
 clickGoUpC:'.go_uplist', //点击向上class; 

12
 clickDownUpC:'.go_downlist', //点击向下class; 

13
 goStart:'go_tart',

14
 autoCloss:'flase' //自动运行开关,当为'flase'时为开，其它则关；

15
 } ;

16

17
 options = $.extend(defaults, options);

18
 return this.each(function(){

19
 var o = options;

20
 var counts =1;

21
 var linum = $($(this).find(o.actName),$(this)).size();

22
 var ul_class = $($(this).find(o.ulClass),$(this));

23
 var copy_ul_class = $($(this).find(o.copyUlClass),$(this));

24
 var click_go_up_c = $($(this).find(o.clickGoUpC),$(this));

25
 var click_go_down_C = $($(this).find(o.clickDownUpC),$(this));

26
 var go_start = $($(this).find(o.goStart),$(this));

27
 if(linum > o.maxShowNum){

28
 $(copy_ul_class).html($(ul_class).html());

29
 goStartList();

30
 }

31
 var thiswrap = $($(ul_class).parent().parent(),$(this));

32
 //自动运行函数

33
 function auto_function(){

34
 if(counts <= linum){

35
 $(ul_class).animate({top:'-=' + o.actNameH},o.autoTime);

36
 $(copy_ul_class).animate({top:'-=' + o.actNameH},o.autoTime);

37
 counts++;

38
 }else{

39
 $(ul_class).animate({top:0},0);

40
 $(copy_ul_class).animate({top:0},0);

41
 counts = 1; 

42
 }

43
 }

44
 //点击向上移动时；

45
 if(linum > o.maxShowNum){

46
 $(click_go_up_c).click(function(){

47
 if(counts <= linum){

48
 $(ul_class).animate({top:'-=' + o.actNameH},0);

49
 $(copy_ul_class).animate({top:'-=' + o.actNameH},0);

50
 counts++;

51
 }else{

52
 $(ul_class).animate({top:0},0);

53
 $(copy_ul_class).animate({top:0},0);

54
 counts = 1;

55
 }

56
 });

57
 }

58
 //点击向下移动时；

59
 if(linum > o.maxShowNum){

60
 $(click_go_down_C).click(function(){

61
 if(counts > 1){

62
 counts--;

63
 $(ul_class).animate({top:'-'+ counts*o.actNameH},0);

64
 $(copy_ul_class).animate({top:'-'+ counts*o.actNameH},0);

65
 }else{

66
 $(ul_class).animate({top:0},0);

67
 $(copy_ul_class).animate({top:0},0);

68
 counts = linum+1;

69
 }

70
 });

71
 }

72
 //鼠标经过所发生的开始停止；

73
 if(linum > o.maxShowNum){

74
 $(thiswrap).hover(function(){

75
 goStopList();

76
 },function(){

77
 goStartList();

78
 });

79
 }

80
 function goStartList(){

81
 if(o.autoCloss === 'flase'){

82
 go_start = setInterval(auto_function,o.autoTime);

83
 }

84
 }

85
 function goStopList(){

86
 clearInterval(go_start);

87
 }

88
 });

89
 }

90
 });

91
}(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、摩洛哥塞拉，艺术家在一场为流浪儿童为流浪儿童为流浪儿童为流浪儿童募捐的马戏节目中表演</a></li>
<li><a href=”#”>3、昆明警方近日县的“洪兴甸县的“洪兴甸县的“洪兴甸县的“洪兴帮”黑恶势力团伙，缴获…</a></li>
<li><a href=”#”>4、印度克什知自己的孩子在骚乱中丧生时痛不欲生..</a><a href=”#”>曾参加过唐曾参加过唐到了舟曲参加救援</a></li>
<li><a href=”#”>5、明昆明警方近日捣毁了寻甸县的“洪兴帮”黑恶势力团伙，缴获…</a></li>
<li><a href=”#”>6、曾参加过唐曾参加过唐曾参加过唐曾参加过唐</a></li>
<li><a href=”#”>7、湖北武汉汉口汉口曾参加过唐曾参加过唐曾参加过唐曾参加过唐观看两江洪峰过</a></li>
<li><a href=”#”>8、湖北武汉汉曾参加过唐曾参加过唐曾参加过唐曾参加过唐集在江边观</a></li>
<li><a href=”#”>9、湖北武汉汉口汉口龙王庙景区观景平台上，市民聚集在江边观看两江洪峰过汉</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;}

[转载]jquery插件之无缝循环新闻列表

相关推荐

热门标签

分类

链接表

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏