话不多说，先看效果
源码先来以下~~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div {
position: absolute;
top: 0;
left: 0;
border: 1px solid black;
}
.one {
height: 500px;
width: 500px;
z-index: 1;
}
.two {
height: 400px;
width: 400px;
z-index: 2;
}
.three {
height: 300px;
width: 300px;
z-index: 3;
}
.four {
height: 200px;
width: 200px;
z-index: 4;
}
.five {
height: 100px;
width: 100px;
z-index: 5;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div');
var array = ['red','blue','green','black','yellow'];
var arr = '';
for(var i = 0; i < array.length ; i++){
div[i].style.backgroundColor = array[i];
}
setInterval(function(){
arr = array[array.length-1];
for(var i = 0; i < array.length ; i++){
div[i].style.backgroundColor = array[i];
}
array.pop();
array.unshift(arr);
},500);
</script>
</body>
</html>
这是我上安卓课的时候，老师布置的安卓练习，咱们用HTML、CSS、JS实现一下。
大概思路就是，先写5个div，让他们absolute布局，层层叠盖，设置z-index,首先实现这个覆盖的效果。然后其它所有的操作都有JS实现，核心就是加一个定时器，先操作DOM，拿到这5个div，然后先赋一个初始背景颜色，然后加定时器，每次定时器都把数组的最后一个颜色元素拿出来，放到数组的首部，这样就实现了这个依次按序闪烁，切换颜色的效果。
之前我第一个次，那个算法不太好，这个是目前我能想到的比较简便的实现方法，如果有更好的实现方法，欢迎交流！
