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+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
jQuery 使用手册(三)
Sep 23 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
vue实现简单瀑布流布局
May 28 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 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
大师制作的中短波矿石收音机
2020/04/02 无线电
基于php split()函数的用法详解
2013/06/05 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python正则表达式指南 推荐
2018/10/09 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
Python如何实现转换URL详解
2019/07/02 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
python跨文件使用全局变量的实现
2020/11/17 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
中学生家长评语大全
2014/04/16 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
投标服务承诺书
2014/05/28 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js