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 相关文章推荐
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
浅谈Express异步进化史
Sep 09 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
页面刷新时记住滚动条的位置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
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
php动态生成函数示例
2014/03/21 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
js自定义Tab选项卡效果
2017/06/05 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python for循环中的陷阱详解
2018/07/13 Python
pandas 时间格式转换的实现
2019/07/06 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
粗加工管理制度
2014/02/04 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
租赁协议书
2015/01/27 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
高中班主任寄语
2019/06/21 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS