《jQuery实现内容定时切换效果完整实例_》由会员分享，可在线阅读，更多相关《jQuery实现内容定时切换效果完整实例_（7页珍藏版）》请在金锄头文库上搜索。
1、jQuery实现内容定时切换效果完整实例_ 本文实例讲解并描述了jQuery实现内容定时切换效果。分享给大家供大家参考，具体如下： !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN l1/DTD/xhtml1-transitional.dtd html xmlns=l head meta http-equiv=Content-Type content=text/html; charset=UTF-8 title左右切换内容 /title script type=text/javascript /script style type=
2、text/css /* Reset style */ * margin:0; padding:0; word-break:break-all; body background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; h1, h2, h3, h4, h5, h6 font-size:1em; a color:#039; text-decoration:none; a:hover text-decoration:underline; ul, li list-style:none; fieldset, img b
3、order:none; em, strong, cite, th font-style:normal; font-weight:normal; #change position:relative; top :20px;left:60px /* Hot_ranks style */ #hot_ranks position:relative; width:190px; overflow:hidden; margin:50px; border:1px solid #E0E0E0; background:#F6F8F8; #hot_ranks h3 padding:8px 8px 6px 8px; f
4、ont-size:14px; #hot_ranks .hot_ranks_list padding-bottom:6px; #hot_ranks .normal display:none; #hot_ranks .current display:block; #hot_ranks ul li width:95%; height:21px; overflow:hidden; margin:0 auto; line-height:20px; #hot_ranks ul li em padding:0 1px 0 3px; #ranks_change_bar position:absolute; t
5、op:8px; right:2px; #ranks_change_bar a display:block; float:left; width:27px; height:13px; overflow:hidden; margin:0 2px; background:url(arrow.gif) no-repeat; text-indent:-9999px; cursor:pointer; #ranks_change_bar #previous background-position:0 0; #ranks_change_bar #next background-position:-27px 0
6、; /style script src=jquery-1.7.2.min.js type=text/javascript/script script language=javascript $(function() abc(); ); function abc() var $obj = $(#hot_ranks ul); var len = $obj.length; var i = 0; $(#next).click(function() i+; if(i=len) i = 0; $obj.stop(true,true).hide().eq(i).fadeIn(600); return fal
7、se; ); $(#previous).click(function() i-; if(i=-1) i = len-1; $obj.stop(true,true).hide().eq(i).fadeIn(600); return false; ); /每2秒，自动切换。触发.next的click大事 var MyTime = setInterval(function() $(#next).trigger(click); , 4000); /script /head body div id=hot_ranks h3站点价值排行/h3 ul class=current style=display:
8、 block; liem1/em a href=#首支北京奥运竞赛用枪入境/a/li liem2/em a href=#最稳金牌落选奥运阵容/a/li liem3/em a href=#微软否认盖茨为看奥运租房/a/li liem4/em a href=#金晶坐飞机被蛮横夫妇欺侮/a/li liem5/em a href=#俄美女展现奥运服 奥运兵马俑亮相京城装/a/li liem6/em a href=#五部奥运题材电影出炉 志愿者微笑迎奥运/a/li liem7/em a href=#奥运志愿者不乏绝世佳丽 纯洁奥运引导员/a/li liem8/em a href=#奥运饭店正式运行 国际
9、奥委会各部门入驻/a/li /ul ul class=normal style=display: none; liem9/em a href=#奥运会中国最稳的十个冠军/a/li liem10/em a href=#女高校生怎么成了凄惨卡奴/a/li liem11/em a href=#80岁老母竟被儿女逼得有家难回/a/li liem12/em a href=#日本街头清爽美女如此混搭(图)/a/li liem13/em a href=#视频：人眼永久看不到的真相！/a/li liem14/em a href=#87版红楼梦那些难忘笑靥(组图)/a/li liem15/em a href=#
10、美女股神：散户就是被宠坏的人/a/li liem16/em a href=#我的80后老婆从绵羊变成大灰狼/a/li /ul ul class=normal style=display: none; liem17/em a href=#马自达6轿跑全系让利2万元 新威驰全系优待8000/a/li liem18/em a href=#降价致胜全系让2.8万元 海马3现车优待1万元/a/li liem19/em a href=#桑塔纳志俊优待3000元 林荫大道优待3万提销量/a/li liem20/em a href=#金晶坐飞机被蛮横夫妇欺侮/a/li liem21/em a href=#俄美女展现奥运服 奥运兵马俑亮相京城装/a/li liem22/em a href=# 闲聊路拍亚洲最长悍马 强人用遥控车画大黄蜂/a/li liem23/em a href=#奥运志愿者不乏绝世佳丽 纯洁奥运引导员/a/li liem24/em a href=#大开眼界的路虎悬挂车展 最好玩车名排行榜/a/li /ul p id=ranks_change_bara href=# id=previous上一页/aa href=# id=next下一页/a/p /div /body /html 盼望本文所述对大家jQuery程序设计有所关心。 .
