jQuery实现内容定时切换效果完整实例


Posted in Javascript onApril 06, 2016

本文实例讲述了jQuery实现内容定时切换效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>左右切换内容 </title>
<script type="text/javascript">
</script>
<style type="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 { border: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; font-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; top: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; }
</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 false;
     });
     $("#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: block;">
    <li><em>1</em> <a href="#">首支北京奥运比赛用枪入境</a></li>
    <li><em>2</em> <a href="#">"最稳金牌"落选奥运阵容</a></li>
    <li><em>3</em> <a href="#">微软否认盖茨为看奥运租房</a></li>
    <li><em>4</em> <a href="#">金晶坐飞机被蛮横夫妇欺侮</a></li>
    <li><em>5</em> <a href="#">俄美女展示奥运服 奥运兵马俑亮相京城装</a></li>
    <li><em>6</em> <a href="#">五部奥运题材电影出炉 志愿者微笑迎奥运</a></li>
    <li><em>7</em> <a href="#">奥运志愿者不乏绝世佳丽 清纯奥运引导员</a></li>
    <li><em>8</em> <a href="#">奥运饭店正式运行 国际奥委会各部门入驻</a></li>
  </ul>
  <ul class="normal" style="display: none; ">
    <li><em>9</em> <a href="#">奥运会中国最稳的十个冠军</a></li>
    <li><em>10</em> <a href="#">女大学生怎么成了悲惨"卡奴"</a></li>
    <li><em>11</em> <a href="#">80岁老母竟被儿女逼得有家难回</a></li>
    <li><em>12</em> <a href="#">日本街头清新美女如此混搭(图)</a></li>
    <li><em>13</em> <a href="#">视频:人眼永远看不到的真相!</a></li>
    <li><em>14</em> <a href="#">87版红楼梦那些难忘笑靥(组图)</a></li>
    <li><em>15</em> <a href="#">美女股神:散户就是被宠坏的人</a></li>
    <li><em>16</em> <a href="#">我的80后老婆从绵羊变成大灰狼</a></li>
  </ul>
  <ul class="normal" style="display: none; ">
    <li><em>17</em> <a href="#">马自达6轿跑全系让利2万元 新威驰全系优惠8000</a></li>
    <li><em>18</em> <a href="#">"[降价]致胜全系让2.8万元 海马3现车优惠1万元</a></li>
    <li><em>19</em> <a href="#">桑塔纳志俊优惠3000元 林荫大道优惠3万提销量</a></li>
    <li><em>20</em> <a href="#">金晶坐飞机被蛮横夫妇欺侮</a></li>
    <li><em>21</em> <a href="#">俄美女展示奥运服 奥运兵马俑亮相京城装</a></li>
    <li><em>22</em> <a href="#"> [闲聊]路拍亚洲最长悍马 强人用遥控车画大黄蜂</a></li>
    <li><em>23</em> <a href="#">奥运志愿者不乏绝世佳丽 清纯奥运引导员</a></li>
    <li><em>24</em> <a href="#">大开眼界的路虎悬挂车展 "最有趣"车名排行榜</a></li>
  </ul>
  <p id="ranks_change_bar"><a href="#" id="previous">上一页</a><a href="#" id="next">下一页</a></p>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
javascript 节点遍历函数
Mar 28 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
jQuery隐藏和显示效果实现
Apr 06 #Javascript
JS动态改变浏览器标题的方法
Apr 06 #Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 #Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 #Javascript
JS控制伪元素的方法汇总
Apr 06 #Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 #Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 #Javascript
You might like
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
js的一些常用方法小结
2011/06/29 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
Vue的轮播图组件实现方法
2018/03/03 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
Python函数学习笔记
2008/10/07 Python
python使用Berkeley DB数据库实例
2014/09/26 Python
Python lxml模块安装教程
2015/06/02 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
会展策划与管理专业求职信
2014/06/09 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
产品委托授权书范本
2014/09/16 职场文书
Java 超详细讲解hashCode方法
2022/04/07 Java/Android