下边这个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>
你是多张图片的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>