效果：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--编写CSS-->
<style>
img{
float: left;
}
</style>
</head>
<body>
<!--编写HTML-->
<img src="images/rank_3.gif" alt="">
<img src="images/rank_4.gif" alt="">
<img src="images/rank_3.gif" alt="">
<img src="images/rank_4.gif" alt="">
<img src="images/rank_3.gif" alt="">
<img src="images/rank_4.gif" alt="">
<img src="images/rank_3.gif" alt="">
<img src="images/rank_4.gif" alt="">
<img src="images/rank_3.gif" alt="">
<img src="images/rank_4.gif" alt="">
<!--编写JS-->
<script>
//1.找到所有的图片
var imgs = document.getElementsByTagName('img');
for(var i=0; i<imgs.length;i++){
//2.给对象加一个属性abc并赋值，当做img下标
imgs[i].abc = i;
//3.给每个图片绑定鼠标移入事件
imgs[i].onmousemove = function(){
//给n赋img下标
var n = this.abc;
//将n之前的所有图片都换为黄色
for(var j=0; j<=n; j++){
//设置图片src地址,将里面的3换为1,即可更换
imgs[j].setAttribute('src', imgs[j].getAttribute('src').replace('3', '1'));
imgs[j].setAttribute('src', imgs[j].getAttribute('src').replace('4', '2'));
}
//将n之后的图片都换为灰色
for(var k=n+1; k<imgs.length; k++){
imgs[k].setAttribute('src', imgs[k].getAttribute('src').replace('1', '3')); // images/rank_3.gif
imgs[k].setAttribute('src', imgs[k].getAttribute('src').replace('2', '4'));
}
};
}
</script>
</body>
</html>
附件：联系1548582000@.com