展示效果
页面格式
// drawD --默认样式class 、drawDR --需要展示的样式class
<div class="luckDraws">
<div class="luckDraw luckDraw1 drawD">
<img src="***.png"/>
<p>文字文字</p>
</div>
<div class="luckDraw luckDraw2 drawD">
<img src="***.png"/>
<p>文字文字</p>
</div>
<div class="luckDraw luckDraw3 drawD">
<img src="***.png"/>
<p>文字文字</p>
</div>
<div class="luckDraw luckDraw4 drawD">
<img src="***.png"/>
<p>文字文字</p>
</div>
<div class="luckDraw luckDraw5 drawD">
<img src="***.png"/>
<p>文字文字</p>
</div>
<div class="luckDraw luckDraw6 drawD">
<img src="***.png"/>
<p>文字文字</p>
</div>
<div class="luckDraw luckDraw7 drawD">
<img src="***.png"/>
<p>文字文字</p>
</div>
<div class="luckDraw luckDraw8 drawD">
<img src="***.png"/>
<p>文字文字</p>
</div>
</div>
点击抽奖按钮之后js
//封装function
function animateRote(){
for(var i=1;i<=8;i++){
setTimeout(function (i) {
$(".luckDraw"+i+"").removeClass("drawD").addClass("drawDR");
setTimeout(function () {
$(".luckDraw"+i+"").removeClass("drawDR").addClass("drawD");
},100);
},100*i,i);
}
}