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

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

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

来源：易贤网阅读：2043 次日期：2014-06-18 21:21:36

温馨提示：易贤网小编为您整理了“jQuery循环滚动新闻列表示例代码”,方便广大网友查阅！

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="">

<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/">

<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技术专栏

上一篇：ext combobox动态加载数据库数据(附前后台)

下一篇：JavaScript利用append添加元素报错的解决方法

易贤网手机网站地址：jQuery循环滚动新闻列表示例代码

由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！