jsTAB自动切换特效作业-php线上五班

作业总结：

新建变量：
新建一个变量num赋值0，新建一个变量timer赋值 null，获取标题集合的id并赋值变量noticeTit，获取内容div集合的id并赋值变量noticeCon，用noticeTit.getElementByTagName('li')获取一下li标签赋值给变量title，用noticeCon.ElementsByClassName获取一下内容集合的class并赋值给con变量。
循环并设置鼠标方法
使用for来循环一下，当变量 i 小于 title的长度的时候自增1，循环体内的i值赋值给title的索引（下标），title的下标连接鼠标事件onmouseenter 的函数，当鼠标移动到这个当前的这个标签的时候执行函数体内的动作，先清除一下定时器，执行showTab函数，函数传参当前的this.index索引值，把this.index值赋值给变量num。
使用title[i].onmouseleave=function执行方法，设置一个定时器定时器内每隔1秒执行autoPlay函数，并且把这个定时器赋值给变量timer。
创建showTab函数
创建函数showTab，括号内传值(i) .设置for循环，在循环体内如果变量 j 小于 con.length 的长度，j++。循环体内title变量的样式修改为空，con设置none隐藏。循环体外使用title[i].style.className='select' ,con.style.display='block'.意思是给当前下标的title添加一个class样式和让内容块con显示，下标值来自于函数传参的 i 。
创建autoPlay()函数
先让num++，因为自动播放了，需要让标题和内容跳到显示下一个。如果num的值等于title的长度说明已经到最后一个了，就清空num让num等于0。
if体外执行showTab(num) num的值已经是自增完或者是清空为0的值了，这样跳回showTab函数再运行即可。

企业微信截图_15544476051553.png

实例

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab</title>
	<style>
	*{
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
}
a{text-decoration: none;color: #333;}
#notice{
	width: 498px;
	border: 1px solid #eee;
	overflow: hidden;
	margin: 50px auto;
}
#notice-tit{
	background: #f7f7f7;
	height: 30px;
}
#notice-tit li{
	float: left;
	width: 70px;
	height:29px;
	line-height: 29px;
	text-align: center;

}
.mod{margin: 10px;}
 .select{
	background: #fff;
	font-weight:bolder;
	border-left: 1px solid #eee;
	border-right:1px solid #eee;
	border-bottom: 1px solid #fff;

}
#notice-con li{
	float: left;
	width: 49%;
	height: 26px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

}
	
	</style>
	
</head>
<body>
	<div id="notice">
		<div id="notice-tit">
			<ul>
				<li class="select"><a href="javascript:;">公告1</a></li>
				<li><a href="javascript:;">规则2</a></li>
				<li><a href="javascript:;">论坛3</a></li>
				<li><a href="javascript:;">安全4</a></li>
				<li><a href="javascript:;">工艺5</a></li> 
			</ul>
		</div>
		<div id="notice-con">
			<div class="mod" >
				<ul>
					<li><a href="javascript:;">新闻内容测试新闻内容测试新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试1</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
				</ul>
			</div>
			<div class="mod" style='display:none'>
				<ul>
					<li><a href="javascript:;">新闻内容测试2</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
				</ul>
			</div>
			<div class="mod" style='display:none'>
				<ul>
					<li><a href="javascript:;">新闻内容测试3</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
				</ul>
			</div>
			<div class="mod" style='display:none'>
				<ul>
					<li><a href="javascript:;">新闻内容测试4</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
				</ul>
			</div>
			<div class="mod" style='display:none'>
				<ul>
					<li><a href="javascript:;">新闻内容测试5</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
					<li><a href="javascript:;">新闻内容测试</a></li>
				</ul>
			</div>
		</div>
	</div>
<script type="text/javascript">
		window.onload=function(){ 
		 	// 获取一下标题id的div
			var noticeTit=document.getElementById('notice-tit');
			// 获取一下内容id的div
			var noticeCon = document.getElementById('notice-con');
			// 获取一下标题的li元素集合
			var title = noticeTit.getElementsByTagName('li');
			// 获取一下内容class的集合
			var con = noticeCon.getElementsByClassName('mod');

			// 设置数量的初始值
			var num = 0;
			//存放定时器
			var timer = null;
			
			// 设置元素样式的函数
		
		
			// 自动切换
				// 循环一下标题的长度
			for (var i = 0; i < title.length; i++) {
				// 将循环的i赋值给title索引下标
				 title[i].index=i;
				 //console.log(title[i].index);

				 title[i].onmouseenter=function(){
				 	clearInterval(timer) //清除一下定时器
				 	// 调用showTab函数传值当前的索引
				 	showTab(this.index) 
				 	num=this.index;//  拿到长度的值
				 }
				 // 当鼠标移出的时候定时器自动动，当鼠标移入停止
				 title[i].onmouseleave=function(){
				 timer=setInterval(autoPlay,3000)
				 }
			}
				function showTab(i){
				// 先循环一遍内容div的长度，把所循环到的内容+标题的样式进行修改
				for (var j = 0; j < con.length; j++) {
					con[j].style.display='none';
					title[j].className=''
				}
				// 把传进来的参数调用，让对应的元素获取样式
				con[i].style.display='block';
				title[i].className='select'
			}
			
			function autoPlay(){
				// 当执行这个自动播放函数的时候，把num值+1这样就进入了下一个元素
				num++;
				// 如果num的值已经等于标题长度了，就清零num然后再执行shotTab函数
				if(num==title.length){
					num=0;
				}
				showTab(num)
			}
		 }
	</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

相关文章