纯JS制作自动播放选项卡

先预览无一例外的简陋版样子

下面看源码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;	
}
input.cur{
	background: yellow;
}
#box{
	margin: 50px auto;
	width: 402px;
}
#box div{
	width: 400px;
	height: 400px;
	border: #ccc solid 1px;
	display: none
}
#box div.cur{
	display: block;
}
</style>
<script type="text/javascript">
window.onload = function(){
	var aInput = document.getElementsByTagName('input');
	var oBox = document.getElementById('box');
	var aDiv = oBox.getElementsByTagName('div');
	var oPrev = document.getElementById('prev');
	var oNext = document.getElementById('next');
	var now = 0;

	for(var i=0; i<aInput.length; i++)
	{
		aInput[i].index = i;
		aInput[i].onclick = function()
		{
			now=this.index;
			for(var i=0; i<aInput.length; i++)
			{
				aDiv[i].className = '';
				aInput[i].className = '';
			}
			aDiv[this.index].className = 'cur';
			this.className="cur";
		};
	}

	//上一页
	oPrev.onclick = function()
	{
		if(now>0)
		{
			now--;
		}
		else
		{
			now=aInput.length-1;
		}
		for(var i=0; i<aInput.length; i++)
		{
			aInput[i].className = '';
			aDiv[i].className = '';
		}
		aInput[now].className = 'cur';
		aDiv[now].className = 'cur';
	};

	//下一页
	oNext.onclick = next;

	function next()
	{
		if(now<aInput.length-1)
		{
			now++;
		}
		else
		{
			now=0;
		}
		for(var i=0; i<aInput.length; i++)
		{
			aInput[i].className = '';
			aDiv[i].className = '';
		}
		aInput[now].className = 'cur';
		aDiv[now].className = 'cur';
	};

	//自动播放
	var timer = setInterval(next,1000);

	oBox.onmouseover = function()
	{
		clearInterval(timer);
	};
	oBox.onmouseout = function()
	{
		timer = setInterval(next,1000);
	};
};
</script>
</head>

<body>
<div id="box">
	<a id="prev" href="javascript:;">上一页</a>
	<input class="cur" type="button" value="aaaaa">
	<input type="button" value="bbbbb">
	<input type="button" value="ccccc">
	<a id="next" href="javascript:;">下一页</a>
	<hr>
	<div class="cur">1111111111111</div>
	<div>22222222222222222222</div>
	<div>3333333333333333333333333333</div>
</div>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注