jQuery 制作交通信号灯红绿灯动画效果

jQuery 制作交通信号灯红绿灯动画效果

HTML

	<p>好好学习 天天向上</p>
	<div class="light">
		<div class="red"></div>
		<div class="yellow"></div>
		<div class="green"></div>
	</div>

CSS

	* {
		box-sizing: border-box;
	}
	p {
		text-align: center;
	}
	.light {
		width: 103px;
		height: 303px;
		background-color: #000;
		margin-left: 600px; 
		margin-top: 30px;
	}
	.light div {
		position: relative;
	}
	.red {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: red;
	}
	

	.yellow {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: yellow;
		display: none;
		position: absolute;
		top: 100px;
	}
	.green {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: green;
		display: none;
		position: absolute;
		top: 200px;
	}

JS：

	$(function(){
 		index = 0;
		function red() {
			//定时器每隔三秒换一个颜色
			setInterval(function(){
			index++;
			if(index>3){
				//当第三个灯亮完之后，再从第一个红灯开始。
				index = 0;
			}
			$('.light div:eq(' + index + ')').css('display', 'block').siblings().css('display', 'none');
			}, 3000);
		}
		
		red();
	})

效果演示：