jQuery循环滚动新闻列表示例代码


Posted in Javascript onJune 17, 2014

最近由于项目原因,学习了下jquery,实现了一个小小的功能,就是点击公告的上一条下一条来查看滚动条。具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
<meta http-equiv="X-UA-Compatible" content="IE=7" /> 
<meta name="keywords" content=""><meta name="description" content=""> 
<title>test</title> 
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script> <style> 
.banner_index { float:left; width:730px; height:239px; overflow:hidden; margin:5px 0 0 0;} 
.banner_index_pic { width:730px; height:239px; overflow:hidden;} 
</style> 
</head> 
<body scroll="yes"> 
<script type="text/javascript" src="jcarousellite_1.0.1.js"></script> 
<div class="gg"> 
<li class="gg_btn"> 
<img src="pre_btn.jpg" border="0" id='gg_p' style="cursor: pointer;" title="上一条"/> 
<img src="break_btn.jpg" border="0" id='gg_s' style="cursor: pointer;" title="暂停"/> 
<img src="next_btn.jpg" border="0" id='gg_n' style="cursor: pointer;" title="下一条"/> 
</li> 
<li class="gg_info"> 
<a class="aa" style="cursor:hand" href="/notice/"> 
<b>网厅公告:</b></a> 
<div id="dt_gg" style="display: none; float: left; width: 450px;"> 
<ul style="height:25px;overflow:hidden;"> 
<li style="width: 300px"> 
<a class="aa" href="/cms/web/default/new/notice/50514.shtml" title="关于调整全省固定电话本地电话网营业区间通话费上限标准的通知"> 
<span style="width:300px;">关于调整全省固定电话本地电话网</span> 
</a> 
<span style="width:100px;">[2010-06-24]</span> 
</li> 
<li style="width: 300px"> 
<a class="aa" href="/cms/web/default/new/notice/50515.shtml" title="中国电信机场/车站贵宾服务电子化认证公告"> 
<span style="width:300px;">中国电信机场/车站贵宾服务电子</span> 
</a> 
<span style="width:100px;">[2010-06-24]</span> 
</li> 
</ul> 
</div> 
</li> 
</div> 
<script type="text/javascript"> 
jQuery(function(){ 
jQuery('#dt_gg').css("display","block"); 
if(jQuery('#dt_gg').find('li').length>1){ 
jQuery('#dt_gg').jCarouselLite({ 
btnPrev:'#gg_n', 
btnNext:'#gg_p', 
btnAutoSwitch:'#gg_s', 
visible: 1, 
auto:5000, 
speed:1000, 
onMouse:true, 
vertical:true 
}); 
}else{ 
jQuery('#dt_gg').jCarouselLite({ 
visible: 1 
}); 
} 
}); 
jQuery(function(){ 
jQuery('#gg_s').click(function(){ 
if(jQuery(this).attr('src') == "/cms/web/images/V3/public/break_btn.jpg"){ 
jQuery(this).attr('src','/cms/web/images/V3/public/play_btn.jpg'); 
jQuery(this).attr('title','播放'); 
}else{ 
jQuery(this).attr('src','/cms/web/images/V3/public/break_btn.jpg'); 
jQuery(this).attr('title','暂停'); 
} 
}); 
}); 
</script>
Javascript 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
页面刷新时记住滚动条的位置jquery代码
Jun 17 #Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 #Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 #Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 #Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 #Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 #Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 #Javascript
You might like
PHP中一个控制字符串输出的函数
2006/10/09 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python编程之多态用法实例详解
2015/05/19 Python
python开发之for循环操作实例详解
2015/11/12 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
python3.6数独问题的解决
2019/01/21 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
python温度转换华氏温度实现代码
2020/12/06 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
本科生求职简历的自我评价
2013/10/21 职场文书
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
党支部对照检查材料
2014/08/25 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
南极大冒险观后感
2015/06/05 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL