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 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
判断访客终端类型集锦
Jun 05 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
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/03/02 国漫
php上的memcache和memcached两个pecl库
2010/03/29 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
php实现的ping端口函数实例
2014/11/12 PHP
php下Memcached入门实例解析
2015/01/05 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
PHP7 标准库修改
2021/03/09 PHP
JavaScript prototype属性使用说明
2010/05/13 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python定时任务sched模块用法示例
2018/07/16 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
python 实现A*算法的示例代码
2018/08/13 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
幼儿园中秋节活动方案2013
2014/01/29 职场文书
五好关工委申报材料
2014/05/31 职场文书
2015双创工作总结
2015/07/24 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang