实现广告自动播放切换的效果_面广告,20秒后自动播放-CSDN博客

本文链接：https://blog.csdn.net/Anlilower/article/details/52649302

效果：

每一秒向后跳转一个选项卡，鼠标移入块中则停止移动，否则自动继续移动

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	#box{
		width:800px;
		height: 500px;
		border: 1px solid tomato;
		margin:0 auto;
		margin-top:50px;
		border-radius:10px;
		background:#ccc;
	}
	input{
		
		width: 80px;
		height: 50px;
		border: 1px;
		margin-left: 120px;
		margin-top: 10px;
	}
	#box input{
		width:10px;
		height:10px;
		border-radius:2px;
	}
	#box div{
		margin:30px 30px 0px 50px;
		width: 700px;
		height: 400px;
		border: 1px solid #ccc;
		line-height: 200px;
		display:none;
	}
	#box div img{
		width: 700px;
		height: 400px;
	}
	#box .active{
		background:tomato;
	}
	#box .display{
		display:block;
	}
</style>
<body>
	<div id="box">
		
		<input class="active" type="button" value=""></input>
		<input type="button" value=""></input>
		<input type="button" value=""></input>
		<input type="button" value=""></input>
		
		<div class="display"><img src="images/ad1.jpg" /></div>
		<div><img src="images/ad2.jpg" /></div>
		<div><img src="images/ad3.jpg" /></div>
		<div><img src="images/ad4.jpg" /></div>
	</div>
	<script>
	window.onload = function()
	{
		var oBtn = document.getElementsByTagName('input');
		var oBox = document.getElementById('box');
		var oDiv = oBox.getElementsByTagName('div');		//取oBox下的div
		var iNow = 0;
		for(var i = 0;i < oBtn.length;i++){
				
				oBtn[i].index = i;
				
				oBtn[i].onclick = function()
				{
					for (var j = 0;j < oBtn.length;j++) {
						oBtn[j].className = '';
						oDiv[j].className = '';
					}
					this.className = 'active';
					iNow = this.index;
					oDiv[this.index].className = 'display';
				}
		}	
		var timer = setInterval(next,3000);
		oBox.onmouseover = function()					//停止和开始都是与大Box有关的
		{
			clearInterval(timer);
		}
		oBox.onmouseout = function()
		{
			timer = setInterval(next,3000);
		}
		var oPrev = document.getElementById('prev');
		var oNext = document.getElementById('next');
		oPrev.onclick = prev;
		oNext.onclick = next;
		function prev ()
		{
			iNow--;
			if (iNow == -1){
				
				iNow = oBtn.length - 1;
			}
			tab();
		}
		function next()
		{
			
			iNow++;
			if (iNow == oBtn.length){
				iNow = 0;
			}
			tab();		
		}
		function tab(){
			for (var i =0;i<oBtn.length;i++){
				oBtn[i].className = '';
				oDiv[i].className = '';
			}
			oBtn[iNow].className = 'active';
			oDiv[iNow].className = 'display';	
		}
		
		
		
	}
		
	</script>
</body>
</html>