基于jquery的无缝循环新闻列表插件

所属分类: 网络编程 / JavaScript 阅读数: 583
收藏 0 赞 0 分享
一、效果图:

tips源码下载 http://xiazai.jb51.net/201103/yuanma/jquerynewslist.rar
二、jquery源码:
复制代码 代码如下:

(function($){
$.fn.extend({
newsList:function(options){
var defaults ={
actName:'li', //显示条数名;
maxShowNum:'6', //最多的显示条数;
actNameH:'28', //一次移动的距离;
ulClass:'.ul_news_list', //被复制层的class
copyUlClass:'.ul_news_list2', //复制层的class
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().parent(),$(this));
//自动运行函数
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;
}
}
//点击向上移动时;
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;
}
});
}
//点击向下移动时;
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;
}
});
}
//鼠标经过所发生的开始停止;
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、摩洛哥塞拉,艺术家在一场为流浪儿童为流浪儿童为流浪儿童为流浪儿童募捐的马戏节目中表演</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 LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多