0

0

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

php中文网

php中文网

发布时间:2016-05-16 18:09:47

|

1209人浏览过

|

来源于php中文网

原创

一、效果图:
基于jquery的无缝循环新闻列表插件_jquery
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 $(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 $(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:
复制代码 代码如下:

四、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;}

相关专题

更多
vlookup函数使用大全
vlookup函数使用大全

本专题整合了vlookup函数相关 教程,阅读专题下面的文章了解更多详细内容。

26

2025.12.30

金山文档相关教程
金山文档相关教程

本专题整合了金山文档相关教程,阅读专题下面的文章了解更多详细操作。

28

2025.12.30

PS反选快捷键
PS反选快捷键

本专题整合了ps反选快捷键介绍,阅读下面的文章找到答案。

25

2025.12.30

表格中一行两行的方法
表格中一行两行的方法

本专题整合了表格中一行两行的相关教程,阅读专题下面的文章了解更多详细内容。

3

2025.12.30

cpu温度过高解决方法大全
cpu温度过高解决方法大全

本专题整合了cpu温度过高相关教程,阅读专题下面的文章了解更多详细内容。

5

2025.12.30

ASCII码介绍
ASCII码介绍

本专题整合了ASCII码相关内容,阅读专题下面的文章了解更多详细内容。

31

2025.12.30

GPS是什么
GPS是什么

本专题整合了GPS相关内容,阅读专题下面的文章了解更多详细内容。

3

2025.12.30

wifi拒绝接入
wifi拒绝接入

本专题整合了wifi拒绝接入相关教程,阅读下面的文章了解更多详细方法。

9

2025.12.30

丰网速运介绍
丰网速运介绍

本专题整合了丰网速运查询入口以及相关内容,阅读专题下面的文章了解更多内容。

3

2025.12.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP基础入门课程
PHP基础入门课程

共33课时 | 1.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号