<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{
width: 420px;height: 420px;
margin: 30px auto;
}
#box img{
width: 130px;height: 130px;
float: left;margin: 1px;
border-radius: 20px;
border: solid 3px #FFFFFF;
}
#box5{opacity: 0;}
</style>
</head>
<body>
<div id="box">
<img id="box1" src="../img/29.jpg" />
<img id="box2" src="../img/18.jpg" />
<img id="box3" src="../img/19.jpg" />
<img id="box4" src="../img/23.jpg" />
<img id="box5" src="../img/24.jpg" />
<img id="box6" src="../img/28.jpg" />
<img id="box7" src="../img/18.jpg" />
<img id="box8" src="../img/19.jpg" />
<img id="box9" src="../img/23.jpg" />
</div>
<script type="text/javascript">
let img = document.querySelectorAll('#box img')
// console.log(img)
let num = parseInt(Math.random()*9) //产生最后随机变大的照片
console.log(num)
let boxs = document.querySelectorAll('img')
console.log(boxs)
//控制边框的颜色
let j=0;
// img[0].style.borderColor = 'red'
let timer = setInterval(function(){
img[j].style.borderColor = 'white'
if(j==8){
j=0
}else{
j++
}
img[j].style.borderColor = 'red'
// console.log(j)
},50)
setTimeout(function(){//控制整体时间
for(let i = 0;i<img.length;i++){
img[i].style.display = 'none'
}
setTimeout(function(){//控制每个边框变红的时间
img[num].style.display = 'block'
img[num].style.width = 396 + 'px'
img[num].style.height = 396 + 'px'
if (num==4) {
img[4].style.opacity = 1
}
clearInterval(timer)
},50)
},5000)
</script>
</body>
</html>