一、首先引入jquery cdn
二、基础样式
![](https://i-blog.csdnimg.cn/blog_migrate/dbc0956d7da0ed826d4e4dbd4ae9ea9c.png)
三、目的
为了使随机某个li背后有个旋转的图片
![](https://i-blog.csdnimg.cn/blog_migrate/6dcd2129e9893e337a8fe66d6b70ae01.png)
四、核心代码
html代码:
<div class="bg3">
<ul>
<li>
<img src="bt1.png" alt="" class="m_img">
<img src="btbg.png" alt="" class="r">
</li>
<li>
<img src="bt2.png" alt="" class="m_img">
<img src="btbg.png" alt="" class="r">
</li>
<li>
<img src="bt3.png" alt="" class="m_img">
<img src="btbg.png" alt="" class="r">
</li>
<li>
<img src="bt4.png" alt="" class="m_img">
<img src="btbg.png" alt="" class="r">
</li>
<li>
<img src="bt5.png" alt="" class="m_img">
<img src="btbg.png" alt="" class="r">
</li>
<li>
<img src="bt6.png" alt="" class="m_img">
<img src="btbg.png" alt="" class="r">
</li>
</ul>
</div>
js代码:
<script type="text/javascript">
var flag = true
setInterval(function () {
var arr = [].slice.call($("li"));
var obj = arr.splice(Math.floor(Math.random() * arr.length), 1)[0].children[1];
if (flag) {
obj.className = "my_img";
flag = false
} else {
var arr = [].slice.call($("li"));
$('li').children('img.my_img').attr('class', 'r')
flag = true
}
console.log(obj)
}, 2000)
css:
.r{
position: absolute;
top: 5px;
left: -9px;
}
@keyframes rotation {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.my_img {
position: absolute;
top: 5px;
left: -9px;
transform-style: preserve-3d;
animation: rotation 2s linear infinite;
}
希望有更好的意见,谢谢观看