封装自动播放选项卡

最新推荐文章于 2021-10-28 21:46:55 发布

原创最新推荐文章于 2021-10-28 21:46:55 发布 · 151 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>自动播放选项卡</title>
<style>
	* {
		margin: 0;
		padding: 0;
	}
	
	#box,#box2,#box3,#box4 {
		width: 500px;
		height: 400px;
		border: 1px solid #000;
		border-radius: 8px;
		text-align: center;
		padding-top: 10px;
		margin: 30px;
		float: left;
	}

	a {
		text-decoration: none;
		font-size: 40px;
	}
	
	.inp input {
		width: 100px;
		height: 40px;
		font-size: 18px;
		font-weight: bold;
		outline: none;
		background: #ccc;
	}
	
	.inp .active {
		width: 100px;
		height: 40px;
		font-size: 18px;
		font-weight: bold;
		outline: none;
		background: #f50;
	}
	
	.body div {
		width: 450px;
		height: 300px;
		text-align: center;
		line-height: 300px;
		font-size: 100px;
		font-weight: bold;
		margin: 0 auto;
		background: #f90;
		border-radius: 8px;
		margin-top: 30px;
		display: none;
	}
	
	.body div.show {
		display: block;
	}
</style>
	<script src="jquery-3.2.1.min.js"></script>
<script>
	$(function () {
		function likTabAuto(oBoxId){
			var oBox = $('#'+oBoxId);
			var aBtn = oBox.find('.inp input');
			var aDiv = oBox.find('.body div');
			var iNow = 0;
			var timer = null;
			for(var i = 0; i < aBtn.length; i++) {
				aBtn[i].index = i;
				aBtn[i].onclick = function() {
					for(var i = 0; i < aBtn.length; i++) {
						aBtn[i].className = '';
						aDiv[i].className = '';
					}
					iNow = this.index;
					this.className = 'active';
					aDiv[this.index].className = 'show';
				}
			}

			function tab() {
				for(var i = 0; i < aBtn.length; i++) {
					aBtn[i].className = '';
					aDiv[i].className = '';
				}
				aBtn[iNow].className = 'active';
				aDiv[iNow].className = 'show';
			}

			function next() {
				iNow++;
				if(iNow == aBtn.length) {
					iNow = 0;
				}
				tab();
			}

			timer = setInterval(next, 1000);
			oBox.hover(function () {
				clearInterval(timer);
			}, function () {
				timer = setInterval(next, 1000);
			});
		}

		likTabAuto('box');
		likTabAuto('box2');
		likTabAuto('box3');
		likTabAuto('box4');
	});
</script>
</head>

<body>
	<div id="box">
		<div class="inp">
			<input type="button" value="你好" class="active" />
			<input type="button" value="再见" />
			<input type="button" value="不送" />
		</div>
		<div class="body">
			<div class="show">你好</div>
			<div>再见</div>
			<div>不送</div>
		</div>
	</div>

	<div id="box2">
		<div class="inp">
			<input type="button" value="你好" class="active" />
			<input type="button" value="再见" />
			<input type="button" value="不送" />
		</div>
		<div class="body">
			<div class="show">你好</div>
			<div>再见</div>
			<div>不送</div>
		</div>
	</div>
	<div id="box3">
		<div class="inp">
			<input type="button" value="你好" class="active" />
			<input type="button" value="再见" />
			<input type="button" value="不送" />
		</div>
		<div class="body">
			<div class="show">你好</div>
			<div>再见</div>
			<div>不送</div>
		</div>
	</div>

	<div id="box4">
		<div class="inp">
			<input type="button" value="你好" class="active" />
			<input type="button" value="再见" />
			<input type="button" value="不送" />
		</div>
		<div class="body">
			<div class="show">你好</div>
			<div>再见</div>
			<div>不送</div>
		</div>
	</div>
</body>

</html>