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


Posted in Javascript onMarch 07, 2011

一、效果图:
基于jquery的无缝循环新闻列表插件
tips源码下载 http://xiazai.3water.com/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;}
Javascript 相关文章推荐
javascript 时间比较实现代码
Oct 28 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
jquery选择器使用详解
Apr 08 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 #Javascript
jQuery总体架构的理解分析
Mar 07 #Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 #Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 #Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 #Javascript
淘宝搜索框效果实现分析
Mar 05 #Javascript
再论Javascript下字符串连接的性能
Mar 05 #Javascript
You might like
php 数组的一个悲剧?
2011/05/11 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
js玩一玩WSH吧
2007/02/23 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
js电话号码验证方法
2015/09/28 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
Python 字典(Dictionary)操作详解
2014/03/11 Python
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
Python解惑之整数比较详解
2017/04/24 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
python里dict变成list实例方法
2019/06/26 Python
dpn网络的pytorch实现方式
2020/01/14 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
挂牌仪式主持词
2014/03/20 职场文书
竞聘书格式及范文
2014/03/31 职场文书
消防安全承诺书
2014/05/22 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
承诺书模板大全
2015/05/04 职场文书
运动会通讯稿200字
2015/07/20 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers