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 相关文章推荐
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
页面刷新时记住滚动条的位置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的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
解析php类的注册与自动加载
2013/07/05 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
百度地图api如何使用
2015/08/03 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python Trie树实现字典排序
2014/03/28 Python
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
python实现二叉查找树实例代码
2018/02/08 Python
Python实现的knn算法示例
2018/06/14 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
SQL数据库笔试题
2016/03/08 面试题
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
关于环保的广播稿
2015/12/17 职场文书
python 中的jieba分词库
2021/11/23 Python
Python实现双向链表
2022/05/25 Python