如何为图片元素切换类？点击播放按钮添加旋转类elem

API 探路者

2026-7-30

解决点击播放按钮切换图片旋转类的问题

实现步骤

获取目标图片元素：通过类选择器定位kiwi类的img标签
同步播放状态切换类：播放歌曲时为图片添加旋转类elem，暂停时移除；也可直接用toggle实现一键切换
确保旋转动画生效：确认elem类的CSS动画样式正确定义

修改后的完整代码

HTML（保持原有结构无需改动）

<img src="./images/kiwi.png" class="kiwi" aria-hidden="true" />
<button onclick="justplay()" id="play"><i class="fa fa-play" aria-hidden="true"></i></button>

CSS（添加旋转动画样式）

/* 图片旋转动画 */
.elem {
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

JavaScript（完善播放逻辑并添加类切换）

let play = document.querySelector("#play");
const kiwiImg = document.querySelector('.kiwi'); // 拿到目标图片
let Playing_song = false;
// 替换为你的音频元素选择器
const track = document.querySelector('#your-audio-id');

function justplay() {
    Playing_song ? pausesong() : playsong();
}

function playsong() {
    track.play();
    Playing_song = true;
    play.innerHTML = '<i class="fa fa-pause" aria-hidden="true"></i>';
    kiwiImg.classList.add('elem'); // 播放时开启旋转
}

function pausesong() {
    track.pause();
    Playing_song = false;
    play.innerHTML = '<i class="fa fa-play" aria-hidden="true"></i>';
    kiwiImg.classList.remove('elem'); // 暂停时停止旋转
}

简化方案：用toggle一键切换

如果希望类切换完全同步按钮点击动作，可直接用classList.toggle替代单独的add/remove，修改justplay函数即可：

function justplay() {
    if (Playing_song) {
        pausesong();
    } else {
        playsong();
    }
    kiwiImg.classList.toggle('elem'); // 一键切换旋转状态
}