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 作用域使用说明
Aug 13 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
解析Vue.js中的组件
Feb 02 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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 数组基础知识小结
2010/08/20 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
H5实现仿flash效果的实现代码
2017/09/29 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python实现命令行通讯录实例教程
2016/08/18 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
python实现反转部分单向链表
2018/09/27 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
Python类中self参数用法详解
2020/02/13 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
Python实现爬取并分析电商评论
2020/06/19 Python
大四学生思想汇报
2014/01/13 职场文书
2014年民警工作总结
2014/11/25 职场文书
怎样写观后感
2015/06/19 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js