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> 

  • 相关阅读:
    Leetcode & CTCI ---Day 4
    Leetcode & CTCI ---Day 3
    Leetcode & CTCI ---Day 2
    Leetcode & CTCI ---Day 1
    编码格式坑之UTF-8
    15. 3Sum
    第十六周助教总结-第二组
    第十五周助教总结-第二组
    第十四周助教总结-第二组
    第十三周助教总结-第二组
  • 原文地址:https://www.cnblogs.com/ranzige/p/3764890.html
Copyright © 2011-2022 走看看