console
var manArr=[
{'gender':'男','age':20,'name':'小米','avater':'./images/playheader.jpg'},
{'gender':'女','age':21,'name':'小李','avater':'./images/playheader.jpg'},
{'gender':'男','age':22,'name':'小明','avater':'./images/playheader.jpg'},
{'gender':'女','age':23,'name':'小丽','avater':'./images/playheader.jpg'},
{'gender':'男','age':24,'name':'小民','avater':'./images/playheader.jpg'},
{'gender':'女','age':25,'name':'小蛮','avater':'./images/playheader.jpg'},
{'gender':'女','age':20,'name':'小理','avater':'./images/playheader.jpg'},
{'gender':'女','age':21,'name':'小松','avater':'./images/playheader.jpg'},
{'gender':'男','age':23,'name':'小宋','avater':'./images/playheader.jpg'},
{'gender':'女','age':22,'name':'小美','avater':'./images/playheader.jpg'},
]
var str='',len=manArr.length;
for(var i=0;i<len;i++){
str+='<div class="list_box">'+
'<img src="../images/playheader.jpg" alt="">'+
'<p>名字:'+manArr[i].name+'</p>'+
'<p><span>性别:'+manArr[i].gender+'</span> <span>年龄:'+manArr[i].age+'</span></p>'+
'</div>'
};
$('.list').html(str);
var box=document.getElementsByClassName('list_box');
var index=0;
$('body').on('click','.btn button',function(){
var time=parseInt(Math.random()*2+1);
var timer=setInterval(function(){
$(box[index]).addClass('active').siblings().removeClass('active');
index+=1;
if(index==len-1){
index=0;
}
},time*100)
setTimeout(function(){
clearInterval(timer);
},3000)
})
<div class="list"></div>
<div class="btn">
<button>开始选人</button>
</div>
.list{
width: 1000px;
height: 400px;
box-sizing: border-box;
margin: 0 auto;
display: flex;
margin-top: 50px;
justify-content: space-around;
flex-wrap: wrap;
}
.list_box{
width: 180px;
height: 160px;
box-sizing: border-box;
text-align: center;
}
.list_box img{
width: 100px;
height: 60px;
margin-top: 10px;
}
.btn{
text-align: center;
}
.btn button{
margin: 0 auto;
width: 120px;
height: 30px;
background: rebeccapurple;
color: antiquewhite;
}
button::before{
border: 0;
outline-color:none;
}
.active{
background: red;
color: #fff;
}