最近由于项目原因，学习了下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. JDBC数据源(DataSource)的简单实现

    数据源技术是Java操作数据库的一个很关键技术,流行的持久化框架都离不开数据源的应用.   数据源提供了一种简单获取数据库连接的方式,并能在内部通过一个池的机制来复用数据库连接,这样就大大减少创建数据 ...

  2. <面试经典题>输入框的功能测试点分析

    (废话几句:这个是网上找来的一份模板,高亮部分为自己修改内容,且此面试题很像当年高考的“必考题”性质,触类旁通吧) 1. 输入框UI是否预计了输入内容长度(尽量完整的显示输入内容): 2. 输入框之前 ...

  3. php生成百度站点地图sitemap.xml

    <?php header("Content-type:text/html;charset=utf-8"); //php生成百度站点地图sitemap.xml //http:/ ...

  4. IE6 IE7 IE8 的函数声明和函数表达式的实现与其他浏览器有差异

    标准参考 函数声明和函数表达式 定义一个函数有两种途径:函数声明和函数表达式. 函数声明: function Identifier ( FormalParameterList opt ) { Func ...

  5. 转——使用Axure制作App原型应该怎样设置尺寸？

    想用Axure设计一个 APP原型 放到真实的移动设备中演示,但不知道应该使用什么尺寸?若要解释清楚像素和分辨率需要的篇幅比较长,请大家参考百度百科.这里金乌直接给大家提供一个常用的移动设备尺寸列表, ...

  6. android系统的文件夹选择器

    aFileChooser: https://github.com/iPaulPro/aFileChooser/issues, 这个是最适合android的文件选择器,看看有无可能改成文件夹选择器. f ...

  7. SpriteKitCommonUse

    [SpriteKitCommonUse] 1.SKView中提供了显示FPS和NodeCount(当前view)的方法,如下: 展现一个scene: - (void)viewWillAppear:(B ...

  8. 用 Python 脚本实现对 Linux 服务器的监控

    目前 Linux 下有一些使用 Python 语言编写的 Linux 系统监控工具 比如 inotify-sync(文件系统安全监控软件).glances(资源监控工具)在实际工作中,Linux 系统 ...

  9. Android_UI_点击按钮切换背景效果实现

    实现按钮按下和释放,按钮背景图片相应切换效果的方法这里介绍两种,一种是在代码里实现,另一种是在xml文件里实现 一.在xml文件里 首先现在layout的一个xml文件下定义Button如下所示: [ ...

  10. sql语句增删改查（转）

    一.增:有4种方法 1.使用insert插入单行数据:                  语法:insert [into] <表名> [列名] values <列值>    例 ...