基于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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
解析Vue.js中的组件
Feb 02 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
npm qs模块使用详解
2020/02/07 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
Python创建xml文件示例
2017/03/22 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
python入门教程之基本算术运算符
2020/11/13 Python
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
小学新学期教师寄语
2014/01/18 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
员工辞退通知书
2015/04/17 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python