最近由于项目原因，学习了下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>

jQuery循环滚动新闻列表的更多相关文章

  1. 【js与jquery】jquery循环滚动新闻

    2.html代码: <h3>最新动态</h3> <div class="scrollNews" > <ul> <li>& ...

  2. 基于jQuery实现滚动新闻代码下载

    分享一款基于jQuery实现滚动新闻代码下载.这是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. JQuery实现页面企业广告图片切换和新闻列表滚动效果

    最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  4. 多行滚动jQuery循环新闻列表代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery 实现列表自动滚动循环滚动显示新闻通知

    需求 页面中一个小区域循环滚动展示通知(公告.新闻.活动.图片等),并且鼠标hover时停止滚动并提示,鼠标离开后,继续滚动. 效果图 https://www.iguopin.com/index.ph ...

  6. Jquery制作--循环滚动列表

    自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可 ...

  7. 潭州课堂25班：Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载，轮播图后台实现 (课堂笔记）

    新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...

  8. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  9. js实现的新闻列表垂直滚动实现详解

    js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...

随机推荐

  1. wc命令--Linux统计文件行数

    语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同时也给出所有指定文件的总统计数.字是由空格字符区分开的最大字符串. 该命令各选 ...

  2. Twitter Storm如何保证消息不丢失

    storm保证从spout发出的每个tuple都会被完全处理.这篇文章介绍storm是怎么做到这个保证的,以及我们使用者怎么做才能充分利用storm的可靠性特点. 一个tuple被”完全处理”是什么意 ...

  3. lookupedit清空选择 z

    lookupedit绑定数据,选择以后.怎么点击按钮使lookupedit回到初始位置,即nulltext的值.注意,是点击按钮,不是按默认的CTRL+DELETE. txtKHXX.EditValu ...

  4. R 安装与环境配置

    R语言是一种很方便的应用于科学计算的语言,推荐给大家学习. 由于R的版本对程序包的兼容有些问题,推荐使用2.15.3. 下面给出下载链接,安装一路默认即可,可以自己更存放目录,其他的都没有影响.下面是 ...

  5. 浅谈AndroidManifest.xml与R.java及各个目录的作用

    在开发Android项目中,AndroidManifest.xml与R.java是自动生成的.但是对于测试来说,非常重要.经过师父的点拨,我对AndroidManifest.xml与R.java有了更 ...

  6. ListView蛮好用

    知识点如下: 1. ListView的基本用法 2. ArrayAdapter和SimpleAdapter的用法 3. OnScrollListener 和 OnItemClickListener 4 ...

  7. c++ 对象内存布局详解

    今天看了的,感觉需要了解对象内存的问题.参考:http://blog.jobbole.com/101583/ 1.何为C++对象模型? 引用<深度探索C++对象模型>这本书中的话: 有两个 ...

  8. win7 下启动mysql

    1.下载mysql最新版,解压,不用安装. 2.启动服务: 进入bin文件夹下,使用管理员权限运行 mysqld.exe. 3.测试是否启动了服务. 4.登录mysql.初次安装的,没有设置密码,直接 ...

  9. Ubuntu安装PostgreSQl

    warrior@pc:~$ sudo apt-get install postgresql-xx-xx #可以使用Tab键进行代码补全 warrior@pc:~$ sudo su postgres # ...

  10. Python伪开发者对于搜狐云景的测评

    Python伪开发者对于搜狐云景的测评 本人是GAE和OpenShift的狂热爱好者,玩过各种国外PaaS.某次想搞个稍微复杂点的Python Web程序,需要比较好的网络传输速度,就试图找前PM(P ...