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 相关文章推荐
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
Python中的字符串替换操作示例
2016/06/27 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
python实时监控cpu小工具
2018/06/21 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
水果花束:Fruit Bouquets
2017/12/20 全球购物
2014全国两会学习心得体会1000字
2014/03/10 职场文书
医德医风演讲稿
2014/05/20 职场文书
初中班级口号
2014/06/09 职场文书
民主生活会汇报材料
2014/12/15 职场文书
担保书格式
2015/01/20 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers