最近由于项目原因，学习了下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. [转] 从 dll 程序集中动态加载窗体

    无涯 原文 从 dll 程序集中动态加载窗体 [原创] 昨天晚上花了一晚上时间写了一个从程序集中动态加载窗体的程序．将任何包含窗体的代码编译成 dll 文件,再把 dll 文件拷贝到本程序的目录下,本 ...

  2. crontab的安装及crontab命令介绍

    前一天学习了 at 命令是针对仅运行一次的任务,循环运行的例行性计划任务,linux系统则是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个 ...

  3. Free Candies

    题意: 有4堆东西,每堆有n个每个有一个颜色,现在有一个篮子最多能装5个不同的颜色的东西,每次都从堆顶拿,当篮子出现两个相同颜色,可以获得这两个东西,求获得的最大数量 分析: 因为就4推,可以把各堆的 ...

  4. 牛课--C/C++

    引用是除指针外另一个可以产生多态效果的手段. //引用是除指针外另一个可以产生多态效果的手段. #include<iostream> using namespace std; class ...

  5. AI钻石天鹅风格

    第1步:描绘轮廓 你需要对你的设计有个总体的概念.利用照片和钢笔工具(P)描出轮廓.把填充颜色设为无,描边颜色设为黑色,1pt 粗细.这将作为你完成剩下设计的指导.编组 (Ctrl+G)你的线条并在图 ...

  6. Flex 对Java端返回Collection的处理方法

    将Flex与Spring集成后(BlazeDS 与Spring集成指南 ),第一个面临的问题就是:对于Java端返回的各种Java类型的对象,Flex中能否有相应的数据类型来映射. 处理,尤其是Lis ...

  7. initWithSpriteFrameName和createWithSpriteFrameName

    /** * Initializes a sprite with a sprite frame name. <br/> * A cc.SpriteFrame will be fetched ...

  8. MYSQL数据库性能调优之四：解决慢查询--索引

    为什么索引能够提高查询速度?没有索引 检索数据的方式是从头到尾一条一条挨着匹配,这是慢的根本原因:索引类型BTREE:二叉树类型,原理图如下:对表创建一个二叉树,记录中间数据的物理磁盘地址,二叉树检索 ...

  9. LoadRunner执行自动化以及报告自动化的方法

    There are three major articles KB articles on Automating LR: 1. Command line arguments for the LoadR ...

  10. python用httplib模块发送get和post请求

    在python中,模拟http客户端发送get和post请求,主要用httplib模块的功能. 1.python发送GET请求 我在本地建立一个测试环境,test.php的内容就是输出一句话: 1 e ...