jQuery实现自动切换播放的经典滑动门效果


Posted in Javascript onSeptember 12, 2015

本文实例讲述了jQuery实现自动切换播放的经典滑动门效果。分享给大家供大家参考。具体如下:

这是一个滑动门代码,从外观上看,简洁经典,似乎与平时见到的滑动门没什么区别,不过它有一个重要的功能与众不同,那就是会自动切换【播放】滑动门的内容,像腾讯QQ登录后弹出的每日要闻一样,如果你再加以美化,那么就更完美无暇了。

运行效果截图如下:

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" />
<script type="text/javascript" src="jquery1.3.2.js"></script>
<title>autoTab,自动切换播放的滑动门</title>
</head>
<style>
*{ margin:0; padding:0;}
ul{ list-style:none}
body{ font-size:12px}
#tabMenus{ width:400px; margin:100px auto 0 auto;overflow:hidden; border:#ccc solid 1px; border-bottom:none;}
#tabMenus li{ float:left; width:100px; height:25px; line-height:25px; background:#ccc; text-align:center}
#tabMenus li a{ display:block; height:100%; color:#000000; text-decoration:none}
#tabMenus li.current{background:#fff}
#tabMenus li.usual{background:#ccc;}
#tabCons{ clear:both;width:400px; margin:0 auto; overflow:hidden; border:#ccc solid 1px; border-top:none}
#tabCons .con{ float:left; padding:10px; width:380px; display:none}
</style>
<script>
$(document).ready(function(){
 var j=0;
 $("#tabMenus li:first").addClass("current");
 $("#tabCons div:first").show();
 $("#tabMenus li").each(function(i){
 $(this).click(function(){
    $(this).addClass("current").siblings().removeClass();
    $("#tabCons > div").hide();
    $("#tabCons div:eq(" + i + ")").show();
  })
 })
 var t=setInterval(function(){
   $("#tabMenus li:eq("+j+")").trigger("click");
   if(j<3){
    j++;
   }else{
    j=0;
   }
 },1000)
})
</script>
<body>
<ul id="tabMenus">
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">3333</a></li>
<li><a href="#">4444</a></li>
</ul>
<div id="tabCons">
<div class="con">1111</div>
<div class="con">2222</div>
<div class="con">3333</div>
<div class="con">4444</div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
别了 JavaScript中的isXX系列
Aug 01 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 #Javascript
javascript判断网页是关闭还是刷新
Sep 12 #Javascript
js查看一个函数的执行时间实例代码
Sep 12 #Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 #Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 #Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 #Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 #Javascript
You might like
php adodb分页实现代码
2009/03/19 PHP
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
javascript的键盘控制事件说明
2008/04/15 Javascript
js判断变量是否空值的代码
2008/10/26 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
jQuery中bind()方法用法实例
2015/01/19 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
Python爬取qq空间说说的实例代码
2018/08/17 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
幼儿运动会邀请函
2014/01/17 职场文书
论文诚信承诺书
2014/05/23 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
民政局个人整改措施
2014/09/24 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
公司捐书倡议书
2015/04/27 职场文书