jQuery循環(huán)滾動新聞列表示例代碼

字號:


    jquery實現(xiàn)點擊公告的上一條下一條來查看滾動條,示例代碼如下,希望對大家有所幫助。
    最近由于項目原因,學習了下jquery,實現(xiàn)了一個小小的功能,就是點擊公告的上一條下一條來查看滾動條。具體代碼如下:
    代碼如下:
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""">
    <html>
    <head>
    <metahttp-equiv="Content-Type"content="text/html;charset=GBK"/>
    <metahttp-equiv="X-UA-Compatible"content="IE=7"/>
    <metaname="keywords"content=""><metaname="description"content="">
    <title>test</title>
    <scripttype="text/javascript"src="jquery-1.2.6.pack.js"></script>
    <style>
    .banner_index{float:left;width:730px;height:239px;overflow:hidden;margin:5px000;}
    .banner_index_pic{width:730px;height:239px;overflow:hidden;}
    </style>
    </head>
    <bodyscroll="yes">
    <scripttype="text/javascript"src="jcarousellite_1.0.1.js"></script>
    <divclass="gg">
    <liclass="gg_btn">
    <imgsrc="pre_btn.jpg"border="0"id='gg_p'style="cursor:pointer;"title="上一條"/>
    <imgsrc="break_btn.jpg"border="0"id='gg_s'style="cursor:pointer;"title="暫停"/>
    <imgsrc="next_btn.jpg"border="0"id='gg_n'style="cursor:pointer;"title="下一條"/>
    </li>
    <liclass="gg_info">
    <aclass="aa"style="cursor:hand"href="/notice/">
    <b>網(wǎng)廳公告:</b></a>
    <divid="dt_gg"style="display:none;float:left;width:450px;">
    <ulstyle="height:25px;overflow:hidden;">
    <listyle="width:300px">
    <aclass="aa"href="/cms/web/default/new/notice/50514.shtml"title="關于調整全省固定電話本地電話網(wǎng)營業(yè)區(qū)間通話費上限標準的通知">
    <spanstyle="width:300px;">關于調整全省固定電話本地電話網(wǎng)</span>
    </a>
    <spanstyle="width:100px;">[2010-06-24]</span>
    </li>
    <listyle="width:300px">
    <aclass="aa"href="/cms/web/default/new/notice/50515.shtml"title="中國電信機場/車站貴賓服務電子化認證公告">
    <spanstyle="width:300px;">中國電信機場/車站貴賓服務電子</span>
    </a>
    <spanstyle="width:100px;">[2010-06-24]</span>
    </li>
    </ul>
    </div>
    </li>
    </div>
    <scripttype="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>