Js实现随机某个li样式增加

一、首先引入jquery  cdn

 

二、基础样式

三、目的

为了使随机某个li背后有个旋转的图片

 

四、核心代码

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;
}

希望有更好的意见，谢谢观看