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 相关文章推荐
浅析js中的浮点型运算问题
Jan 06 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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 curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
简述php环境搭建与配置
2016/12/05 PHP
php session的应用详细介绍
2017/03/22 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
在Python中使用正则表达式的方法
2015/08/13 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
Python字节单位转换实例
2019/12/05 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
德国高性价比网上药店:medpex
2017/07/09 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
大学同学聚会邀请函
2014/01/29 职场文书
三项教育活动实施方案
2014/03/30 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
vue使用watch监听属性变化
2022/04/30 Vue.js