js控制专辑图片旋转效果

需求

需要通过按钮控制专辑图片的旋转和停止

思路

旋转：调用方法利用定时器控制每20ms将图片的角度旋转1°
停止：调用方法清除定时器

代码

<html>

<head>
    <title>图片轮转</title>
    <script>
        window.onload = function () {
            var img = document.getElementById("img")
            var button = document.getElementById("button")
            var num = 0;
            var play;
            //控制音乐播放的方法
            var playMusic = function () {
                //定时器每20ms执行一次
                play = setInterval(
                    function () {
                        //num控制旋转角度
                        img.style.transform = "rotate(" + num + "deg)"
                        num = num + 1
                        if (num == 360) {
                            num = 0
                        }
                    }, 20)
            }
            //点击控制暂停和播放
            button.onclick = function () {
                if (button.innerText == "播放") {
                    button.innerText = "停止"
                    playMusic()

                } else if (button.innerText == "停止") {
                    button.innerText = "播放"
                    clearInterval(play)
                }
            }

        }
    </script>
</head>

<body>
    <img src="周杰伦.jpeg" alt="" style="width: 300px;height: 300px;border-radius: 150px;" id="img">
    <button id="button">播放</button>
</body>

</html>
posted @ 2024-05-25 12:05  酒暖=  阅读(3)  评论(0)  编辑  收藏  举报