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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
jquery中eq和get的区别与使用方法
Apr 14 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
js预加载图片方法汇总
Jun 15 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
微信小程序自定义toast的实现代码
Nov 16 Javascript
JS中如何优雅的使用async await详解
Oct 05 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 HTML代码串 截取实现代码
2009/06/29 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
javascript document.images实例
2008/05/27 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
Python 爬虫的工具列表大全
2016/01/31 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
python关闭占用端口方式
2019/12/17 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
高中生第一学年自我鉴定
2014/09/12 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
python opencv通过按键采集图片源码
2021/05/20 Python
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技