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();})

效果演示：