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 相关文章推荐
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
js常用DOM方法详解
Feb 04 Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
vue项目实现多语言切换的思路
2020/09/17 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python多线程之事件Event的使用详解
2018/04/27 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
什么是GWT的Module
2013/01/20 面试题
什么是继承
2013/12/07 面试题
小学生班会演讲稿
2014/01/09 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
学校招生宣传广告词
2014/03/19 职场文书