点击同一图片，控制音乐开始、暂停

当点击图片时，添加CSS，图片开始进行旋转，同时歌曲开始播放。再次点击时，图片恢复原样，歌曲暂停。
代码如下：
css部分

.cover-play {-webkit-animation: turn 6s infinite linear;animation: turn 6s infinite linear;-o-animation: turn 6s infinite linear;}
@keyframes turn {0% { transform: rotate(0deg);}25% {transform: rotate(90deg);}50%{transform: rotate(180deg);}75%{transform: rotate(270deg);}100%{transform: rotate(360deg);}}
@-webkit-keyframes turn{0%{transform: rotate(0deg);}25%{transform: rotate(90deg);}50%{transform: rotate(180deg);}75%{transform: rotate(270deg);}100%{transform: rotate(360deg);}}
@-o-keyframes turn{0%{transform: rotate(0deg);}25%{transform: rotate(90deg);}50%{transform: rotate(180deg);}75%{transform: rotate(270deg);}100%{transform: rotate(360deg);}}

html部分

<div class="one">
    <img class="a" src="image/name.png">
    <img class="cover-play" src="image/name.png">
    //此处两张图片是一样的，只是添加了CSS样式
</div>
    <audio id="play" src="Everytime.mp3"></audio>

Jquery部分

<script>
    $cover = $('.one img');
    var music = document.getElementById("play");
    isPlay = false;
    $(function(){
        $(".a").siblings().hide();
        $(".one").bind("click",function(){
            if (isPlay == false) {
                iplay();

            } else {
                nplay();

            }
            });
            if (isPlay == true) {
            } else {
            }

    });
//    播放
    function iplay() {
        $cover.addClass('cover-play');
        music.play();
        isPlay = true;
    }

//    暂停
    function nplay() {
        $cover.removeClass('cover-play');
        music.pause();
        isPlay = false;
    }
</script>