求助大佬，咋使这个js让所有为id标签的图片转起来

下边这个js能使网页上的图像转动起来，但是我想知道怎么能让所有的id为img的都转起来呢

        <script>
            var rotateVal = 0 // 旋转角度
            var InterVal // 定时器
            window.onload = function () {
                // 网页加载完成后即运行rotate函数
                rotate()
                // 鼠标悬浮在图片上时，停止旋转，即清除定时器
                document.getElementById('img').onmousemove = function () {
                    clearInterval(InterVal)
                }
                // 鼠标离开图片时，继续旋转，即继续运行定时器
                document.getElementById('img').onmouseleave = function () {
                    rotate()
                }
            }

            // 设置定时器
            function rotate () {
                InterVal = setInterval(function () {
                    var img = document.getElementById('img')
                    rotateVal += 1
                    // 设置旋转属性(顺时针)
                    img.style.transform = 'rotate(' + rotateVal + 'deg)'
                    // 设置旋转属性(逆时针)
                    //img.style.transform = 'rotate(-' + rotateVal + 'deg)'
                    // 设置旋转时的动画  匀速0.1s
                    img.style.transition = '0.1s linear'
                }, 100)
            }
        </script>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

易烊千玺的女朋友 2019-05-22 10:56

关注

你是多张图片的id都为img，还是只有一张图片id为img，id具有唯一性

我还是上代码吧，id改为class，id就相当于你的身份证，一个人只有一个身份证号，也就是说你的代码中的getElementsByClassName('img')只会找到一个img标签，但是class不一样，会找到所有类为class的标签，但是 rotate ()的函数的style就得更改写法，因为class找到后会以数组形式存在

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

        <img src="./share-orange.png" alt="" class="img">
        <img src="./share-orange.png" alt="" class="img">


    <script>
        var rotateVal = 0 // 旋转角度
        var InterVal // 定时器
        window.onload = function () {
            // 网页加载完成后即运行rotate函数
            rotate()
            // 鼠标悬浮在图片上时，停止旋转，即清除定时器
            document.getElementsByClassName('img').onmousemove = function () {
                clearInterval(InterVal)
            }
            // 鼠标离开图片时，继续旋转，即继续运行定时器
            document.getElementsByClassName('img').onmouseleave = function () {
                rotate()
            }
        }

        // 设置定时器
        function rotate () {
            InterVal = setInterval(function () {
                var img = document.getElementsByClassName('img')
                rotateVal += 1
                // 设置旋转属性(顺时针)

                for(var i=0;i<img.length;i++){
                    img[i].style.transform = 'rotate(' + rotateVal + 'deg)'
                }
                // 设置旋转属性(逆时针)
                //img.style.transform = 'rotate(-' + rotateVal + 'deg)'
                // 设置旋转时的动画  匀速0.1s
                img.style.transition = '0.1s linear'
            }, 100)
        }
    </script>

</body>
</html>

本回答被题主选为最佳回答 , 对您是否有帮助呢?