Tab选项卡 自动切换效果js实现
try.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="try.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="notice" class="notice">
<div class="notice-tit" id="notice-tit">
<ul>
<li><a href="#">公告</a></li>
<li><a href="#">规则</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">安全</a></li>
<li class="select"><a href="#">公益</a></li>
</ul>
</div>
<div id="notice-con" class="notice-con">
<div class="mod" style="display: none;">
<ul>
<li><a href="#">张勇：玩快乐足球</a></li>
<li><a href="#">张勇：玩快乐足球</a></li>
<li><a href="#">张勇：玩快乐足球</a></li>
<li><a href="#">张勇：玩快乐足球</a></li>
</ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
</ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
</ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li><a href="#">张勇：要玩快乐</a></li>
<li><a href="#">张勇：要玩快乐足球</a></li>
<li><a href="#">张勇：要玩快乐足球</a></li>
<li><a href="#">张勇：要玩快乐足球</a></li>
</ul>
</div>
<div class="mod" style="display: block;">
<ul>
<li><a href="#">张勇：要玩快乐</a></li>
<li><a href="#">张勇：要玩快乐足球</a></li>
<li><a href="#">张勇：要玩快乐足球</a></li>
<li><a href="#">张勇：要玩快乐</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
try.css
*{
margin: 0;
padding:0;
list-style: none;
font-size: 12px;
}
.notice{
width: 298px;
height: 98px;
margin: 10px;
border: 1px solid #eee;
overflow: hidden;
}
.notice-tit{
height: 27px;
position: relative;
background-color: #f7f7f7;
}
.notice-tit ul{
position: absolute;
width: 301px;
left: -1px;
}
.notice-tit ul li{
float: left;
width: 58px;
height: 26px;
text-align: center;
line-height: 26px;
overflow: hidden;
padding: 0 1px;
background: #f7f7f7;
border-bottom: 1px solid #eee;
}
.notice-tit ul li.select{
background: #fff;
border-bottom-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding: 0;
font-weight: bolder;
}
.notice li a:link,.notice-tit li a:visited{
text-decoration: none;
color: #000;
}
.notice li a:hover{
color: #f90;
}
.notice-con .mod{
margin: 10px 10px 10px 19px;
}
.notice-con .mod ul li{
float: left;
width: 134px;
height: 25px;
overflow: hidden;
}
script.js
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
window.onload=tab;
function tab(){
var index=0;
var timer=null;
var lis=$('notice-tit').getElementsByTagName('li');
var divs=$('notice-con').getElementsByTagName('div');
for(var i=0;i<lis.length;i++){
lis[i].id=i;
lis[i].onmouseover=function(){
clearInterval(timer);
changeOption(this.id);
}
lis[i].onmouseout=function(){
timer=setInterval(autoPlay,2000);
}
}
if(timer){
clearInterval(timer);
timer=null;
}
// ��Ӷ�ʱ�����ı䵱ǰ����������
timer=setInterval(autoPlay,2000);
function autoPlay(){
index++;
if(index>=lis.length){
index=0;
}
changeOption(index);
}
function changeOption(curIndex){
for(var j=0;j<lis.length;j++){
lis[j].className='';
divs[j].style.display='none';
}
lis[curIndex].className='select';
divs[curIndex].style.display='block';
index=curIndex;
}
}
效果：
2017-09-05 20:45:21
Tab选项卡 自动切换效果js实现的更多相关文章
- Tab选项卡 延迟切换效果js实现
try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- js实现图片自动切换效果。
js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...
- 基于HTML5 Tab选项卡动画切换特效
基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 【Little Demo】左右按钮tab选项卡双切换
通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. ...
- HTML+JS+DOM【选项卡自动切换】
最终效果图(鼠标无操作会自动切换选项卡): <!DOCTYPE html> <html> <head> <meta charset="gb2312& ...
- [C#]Winform下回车或Tab键自动切换下一个控件焦点
满足用户体验,在数据录入时,能在输入完一个信息后通过回车或Tab键自动的切换到下一个控件(字段). 在界面控件设计时,默认可以通过设置控件的TabIndex来实现.但在布局调整时或者是对输入的内容有选 ...
- 旋转木马幻灯片切换效果JS源码详解
首先,放上慕课网的课程链接,源码是在这个课程里分享出来的,https://www.imooc.com/learn/386. 文章适合学习过这个课程的同学,再看这篇文章,可能有更深入的理解.主要是对各种 ...
- 自动切换的JS菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns=&quo ...
- 无JavaScript实现选项卡轮转切换效果
CSS: .box{width:200px; height:100px; border:1px solid #ddd; overflow:hidden;}.list{width:200px; he ...
随机推荐
- vue中的render函数介绍
简介:对于不了解slot的用法(参考:大白话vue-slot的用法)又刚接触render函数的同学来说,官网的解释无疑一脸懵逼,这里就整理下个人对render函数的理解 问题: 1.render函数是 ...
- JavaScript中数组的操作方法总汇
Array(数组)是JavaScript中最为常用的类型了.ECMAScript中的数组都是数据的有序列表.数组中可以保存任何类型的数据.数组的大小是可以动态调整的,既可以随着数据的添加自动增长以容纳 ...
- leetcode_1292. Maximum Side Length of a Square with Sum Less than or Equal to Threshold_[二维前缀和]
题目链接 Given a m x n matrix mat and an integer threshold. Return the maximum side-length of a square w ...
- [tyvj]P1939玉蟾宫[单调栈]
[tyvj]P1939 玉蟾宫 ——!x^n+y^n=z^n 背景 有一天,小猫rainbow和freda来到了湘西张家界的天门山玉蟾宫,玉蟾宫宫主蓝兔盛情地款待了它们,并赐予它们一片土地. 描述 这 ...
- ArayList的一些常用法<一> 转
转:http://yy.azj.blog.163.com/blog/static/18508700320122893451389/ import java.util.ArrayList; import ...
- 疑难杂症——解决 Cinder 僵尸卷问题
目录 目录 问题描述 问题解决 最后 问题描述 Cinder 的僵尸卷一般是因为操作不当导致分配的卷无法正常使用且无法正常分离或删除. 问题解决 解决僵尸卷问题的思路类似解决 Linux 系统中的僵尸 ...
- Centos7.2命令安装图形化界面
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/liang_operations/arti ...
- 阻塞进程函数 wait()和waitpid()
1. wait()和waitpid()函数说明 wait() 进程一旦调用了wait(), 就立即阻塞自己,由wait自动分析是否有当前进程的某个子进程已经退出,如果让它找到了一个已经变成僵尸的子进 ...
- 结合Pool进程池进程,实现进程之间的通讯,稍微复杂的运用
#进程池中的Queue """ 如果要用Pool创建进程,就需要multiprocessing.Manager()中的Queue() 而不是multiprocessing ...
- python线程理论
一.什么是线程 线程:顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 所以,进程只是用来把资源集中到一起(进程只是一个资源单位,或者说资源集合),而线程才 ...