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据option的value值快速设定初始的selected选项
Aug 13 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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
一段php加密解密的代码
2006/10/09 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
PHP答题类应用接口实例
2015/02/09 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
js prototype截取字符串函数
2010/04/01 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
python使用Matplotlib画饼图
2018/09/25 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
网站编辑求职信
2013/10/17 职场文书
会走路的树教学反思
2014/02/20 职场文书
演讲稿的写法
2014/05/19 职场文书
新闻稿标题
2015/07/18 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android