jQuery实现内容定时切换效果完整实例
本文实例讲述了jQuery实现内容定时切换效果。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>左右切换内容</title>
<scripttype="text/javascript">
</script>
<styletype="text/css">
/*Resetstyle*/
*{margin:0;padding:0;word-break:break-all;}
body{background:#FFF;color:#333;font:12px/1.6emHelvetica,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{border:none;}
em,strong,cite,th{font-style:normal;font-weight:normal;}
#change{position:relative;top:20px;left:60px}
/*Hot_ranksstyle*/
#hot_ranks{position:relative;width:190px;overflow:hidden;margin:50px;border:1pxsolid#E0E0E0;background:#F6F8F8;}
#hot_ranksh3{padding:8px8px6px8px;font-size:14px;}
#hot_ranks.hot_ranks_list{padding-bottom:6px;}
#hot_ranks.normal{display:none;}
#hot_ranks.current{display:block;}
#hot_ranksulli{width:95%;height:21px;overflow:hidden;margin:0auto;line-height:20px;}
#hot_ranksulliem{padding:01px03px;}
#ranks_change_bar{position:absolute;top:8px;right:2px;}
#ranks_change_bara{display:block;float:left;width:27px;height:13px;overflow:hidden;margin:02px;background:url(arrow.gif)no-repeat;text-indent:-9999px;cursor:pointer;}
#ranks_change_bar#previous{background-position:00;}
#ranks_change_bar#next{background-position:-27px0;}
</style>
<scriptsrc="jquery-1.7.2.min.js"type="text/javascript"></script>
<scriptlanguage="javascript">
$(function(){
abc();
});
functionabc(){
var$obj=$('#hot_ranksul');
varlen=$obj.length;
vari=0;
$("#next").click(function(){
i++;
if(i==len){
i=0;
}
$obj.stop(true,true).hide().eq(i).fadeIn(600);
returnfalse;
});
$("#previous").click(function(){
i--;
if(i==-1){
i=len-1;
}
$obj.stop(true,true).hide().eq(i).fadeIn(600);
returnfalse;
});
//每2秒，自动切换。触发".next"的click事件
varMyTime=setInterval(function(){
$("#next").trigger("click");
},4000);
}
</script>
</head>
<body>
<divid="hot_ranks">
<h3>站点价值排行</h3>
<ulclass="current"style="display:block;">
<li><em>1</em><ahref="#">首支北京奥运比赛用枪入境</a></li>
<li><em>2</em><ahref="#">"最稳金牌"落选奥运阵容</a></li>
<li><em>3</em><ahref="#">微软否认盖茨为看奥运租房</a></li>
<li><em>4</em><ahref="#">金晶坐飞机被蛮横夫妇欺侮</a></li>
<li><em>5</em><ahref="#">俄美女展示奥运服奥运兵马俑亮相京城装</a></li>
<li><em>6</em><ahref="#">五部奥运题材电影出炉志愿者微笑迎奥运</a></li>
<li><em>7</em><ahref="#">奥运志愿者不乏绝世佳丽清纯奥运引导员</a></li>
<li><em>8</em><ahref="#">奥运饭店正式运行国际奥委会各部门入驻</a></li>
</ul>
<ulclass="normal"style="display:none;">
<li><em>9</em><ahref="#">奥运会中国最稳的十个冠军</a></li>
<li><em>10</em><ahref="#">女大学生怎么成了悲惨"卡奴"</a></li>
<li><em>11</em><ahref="#">80岁老母竟被儿女逼得有家难回</a></li>
<li><em>12</em><ahref="#">日本街头清新美女如此混搭(图)</a></li>
<li><em>13</em><ahref="#">视频：人眼永远看不到的真相！</a></li>
<li><em>14</em><ahref="#">87版红楼梦那些难忘笑靥(组图)</a></li>
<li><em>15</em><ahref="#">美女股神：散户就是被宠坏的人</a></li>
<li><em>16</em><ahref="#">我的80后老婆从绵羊变成大灰狼</a></li>
</ul>
<ulclass="normal"style="display:none;">
<li><em>17</em><ahref="#">马自达6轿跑全系让利2万元新威驰全系优惠8000</a></li>
<li><em>18</em><ahref="#">"[降价]致胜全系让2.8万元海马3现车优惠1万元</a></li>
<li><em>19</em><ahref="#">桑塔纳志俊优惠3000元林荫大道优惠3万提销量</a></li>
<li><em>20</em><ahref="#">金晶坐飞机被蛮横夫妇欺侮</a></li>
<li><em>21</em><ahref="#">俄美女展示奥运服奥运兵马俑亮相京城装</a></li>
<li><em>22</em><ahref="#">[闲聊]路拍亚洲最长悍马强人用遥控车画大黄蜂</a></li>
<li><em>23</em><ahref="#">奥运志愿者不乏绝世佳丽清纯奥运引导员</a></li>
<li><em>24</em><ahref="#">大开眼界的路虎悬挂车展"最有趣"车名排行榜</a></li>
</ul>
<pid="ranks_change_bar"><ahref="#"id="previous">上一页</a><ahref="#"id="next">下一页</a></p>
</div>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。