jQuery循环滚动新闻列表示例代码
2014-06-18来源:易贤网

jquery实现点击公告的上一条下一条来查看滚动条,示例代码如下,希望对大家有所帮助。

最近由于项目原因,学习了下jquery,实现了一个小小的功能,就是点击公告的上一条下一条来查看滚动条。具体代码如下:

代码如下:

<!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>网厅公告:</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="关于调整全省固定电话本地电话网营业区间通话费上限标准的通知">

<spanstyle="width:300px;">关于调整全省固定电话本地电话网</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>

更多信息请查看IT技术专栏

2025公考·省考培训课程试听预约报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息