zoukankan      html  css  js  c++  java
  • 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; 730px; height:239px; overflow:hidden; margin:5px 0 0 0;} 
    .banner_index_pic { 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; 450px;"> 
        <ul style="height:25px;overflow:hidden;"> 
        <li style=" 300px"> 
            <a class="aa" href="/cms/web/default/new/notice/50514.shtml" title="关于调整全省固定电话本地电话网营业区间通话费上限标准的通知"> 
               <span style="300px;">关于调整全省固定电话本地电话网</span> 
               </a> 
               <span style="100px;">[2010-06-24]</span> 
              </li> 
        <li style=" 300px"> 
            <a class="aa" href="/cms/web/default/new/notice/50515.shtml" title="中国电信机场/车站贵宾服务电子化认证公告"> 
               <span style="300px;">中国电信机场/车站贵宾服务电子</span> 
               </a> 
               <span style="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> 

  • 相关阅读:
    一本通 1259:【例9.3】求最长不下降序列
    一本通 1258:【例9.2】数字金字塔
    洛谷 P1198 [JSOI2008]最大数
    洛谷 P2863 [USACO06JAN]牛的舞会The Cow Prom
    【BZOJ1062】糖果雨(NOI2008)-数形结合+二维树状数组
    【BZOJ4070】雅加达的摩天楼(APIO2015)-分块+最短路
    【BZOJ2326】数学作业(HNOI2011)-递推+矩阵快速幂
    【BZOJ2734】集合选数(HNOI2012)-状压DP
    【BZOJ3213】抛硬币(ZJOI2013)-期望DP+KMP+高精度
    【BZOJ3590】Quare(SNOI2013)-状压DP
  • 原文地址:https://www.cnblogs.com/ranzige/p/3764890.html
Copyright © 2011-2022 走看看