jQuery循环滚动新闻列表示例代码

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