最近由于项目原因，学习了下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. [整] Android Fragment 生命周期图

    1. onAttach ------called once the fragment is associated with its activity 2. onCreate-------called ...

  2. hdu 4508 湫湫系列故事——减肥记I（完全背包）

    题意:完全背包 思路:完全背包 可以直接转化为 多重背包,num[i]=_v/c[i];//转为多重背包然后运用 多重背包 3种解法如下码1: #include<iostream> #in ...

  3. c/c++ 数字转成字符串, 字符串转成数字

    c/c++ 数字转成字符串, 字符串转成数字 ------转帖 数字转字符串: 用C++的streanstream: #include <sstream> #Include <str ...

  4. VS常用技巧

    VS2005代码编辑器的展开和折叠代码确实很方便和实用.以下是展开代码和折叠代码所用到的快捷键,很常用: Ctrl + M + O: 折叠所有方法 Ctrl + M + M: 折叠或者展开当前方法 C ...

  5. xcode import<xx/xx.h> 头文件报错

    最近一直在写Android程序,有点久没用xcode,在写一个项目准备把 UI7Kit导进去,将iOS 7的界面适配到低版本的时候,出现了这么一个蛋疼的问题.稍微查了一下,新建项目的时候想先做一个li ...

  6. 分享一些前端chm文档

    分享地址:http://yun.baidu.com/share/link?shareid=39230983&uk=1008683945 对于网络不好的人来说,离线文档更加方便.打开速度更快. ...

  7. CSS抗锯齿 font-smoothing

    CSS3里面加入了一个“-webkit-font-smoothing”属性. 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服. 加上之后就顿时感觉页面小清晰了. 淘宝也在用哦! 它有三 ...

  8. GitHub--git push出错解决

    当使用GitHub进行代码push是,出现了下面的错误,该如何是好? 错误描述: ! [rejected]        master -> master (non-fast-forward)e ...

  9. JavaEE5 Tutorial_Jsp,EL

      Jsp的各种元素在转化为servlet时处理是不一样的:指令,控制web容器如何处理页面脚本,被插入到生成的servlet里EL表达式,作为参数传递到解析器get/set Property,变成方 ...

  10. 分享一个自己用的Objective-C的Http接连类

    很久没有更新博客了,所以分享一个. @protocol HttpListenerDelegate; @interface BaseHttp : NSObject { } @property (nona ...