前端笔记89——tab选项卡以及实现自动播放功能

最新推荐文章于 2022-09-22 13:09:44 发布

野生杂学家阿博

最新推荐文章于 2022-09-22 13:09:44 发布

阅读量452

点赞数

分类专栏：前端文章标签：前端 JavaScript tab选项卡自动播放功能

本文链接：https://blog.csdn.net/chengxu_kuangrexintu/article/details/93251996

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

前言

在日常的开发当中，我们遇到点击不同的Tab出现不同的界面，但是我们要怎么去实现Tab呢？下面分享一下Tab有关的代码实例，有兴趣的小伙伴可以复制到编译器当中运行查看效果。

实现Tab选项卡以及实现自动播放功能

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#wrap {
				width: 300px;
				margin: 50px auto;
				font-size: 0;
			}
			
			#wrap div {
				width: 300px;
				height: 150px;
				border: 1px solid black;
				display: none;
				box-sizing: border-box;
				font-size: 18px;
			}
			
			#wrap div:nth-of-type(1) {
				display: block;
			}
			
			#wrap button {
				width: 75px;
				background-color: #009F95;
				border: none;
				border-radius: 0;
				color: white;
				height: 30px;
			}
			
			#wrap button.active {
				background-color: orangered;
			}
		</style>
	</head>

	<body>
		<div id="wrap">
			<button class="active">btn1</button>
			<button>btn2</button>
			<button>btn3</button>
			<button>btn4</button>
			<div>11111</div>
			<div>22222</div>
			<div>33333</div>
			<div>44444</div>
		</div>
		<script type="text/javascript">
			// 需要实现的功能： 1鼠标移动到button身上,显示对应的div
			// 实现思路：默认显示的是第一个div  当鼠标移动到第二个btn身上，需要把1隐藏，把2显示
			// 关键点：btn和div要一一对应,aBtn[0]  aDiv[0] aBtn[1] aDiv[1]
			// 移入的btn下标和要显示的div下标一致
			var aBtn = document.getElementsByTagName("button")
			// 新知识点，限定查找范围，document表示整个html文档
			var oWrap = document.getElementById("wrap")
			// 表示在oWrap对象下去查找div元素
			var aDiv = oWrap.getElementsByTagName("div")
			// 定义个定时器id
			var timer = null
			console.log(aDiv)
			// 给btn绑定事件
			for(var i = 0; i < aBtn.length; i++) {
				// 给每个btn加一个自定义的索引(下标)
				aBtn[i].index = i
				aBtn[i].onmouseover = function() {
					clearInterval(timer)
					// 在这里显示对应的div
					// 显示的div的下标和鼠标移入的这个btn下标一样
					// this.index 表示当前移入的btn的下标
					//					alert(this.index)
					// 把所有的div都隐藏，然后单独显示某一个
					changeTab(aBtn,aDiv,this.index)
				}
				aBtn[i].onmouseout = function() {
					// 移入的是0，nowIndex = 0
					// 移入的是1，nowIndex = 1
					nowIndex = this.index
					autoplay()
				}
			}
			autoplay()
			// 定义当前显示的选项卡下标(btn和div)
			var nowIndex = 0
			// 添加自动播放功能
			function autoplay() {
				timer = setInterval(function() {
					nowIndex++
					nowIndex %= aDiv.length
					changeTab(aBtn,aDiv,nowIndex)
				}, 1000)
			}
			// 改变选项卡功能
			function changeTab(obj_btn, obj_div, index) {
				for(var j = 0; j < aDiv.length; j++) {
					obj_div[j].style.display = "none"
					obj_btn[j].style.backgroundColor = "#009F95"
				}
				obj_btn[index].style.backgroundColor = "orangered"
				obj_div[index].style.display = "block"
			}
		</script>
	</body>
</html>

野生杂学家阿博

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端笔记89——tab选项卡以及实现自动播放功能

前言在日常的开发当中，我们遇到点击不同的Tab出现不同的界面，但是我们要怎么去实现Tab呢？下面分享一下Tab有关的代码实例，有兴趣的小伙伴可以复制到编译器当中运行查看效果。实现Tab选项卡以及实现自动播放功能<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title...
复制链接

扫一扫

专栏目录