一、实现原理：
1、要设置一个“大总管变量”，用于记录点击时的星星下标，只声明不赋值。
2、移入每个星星时，先把所有的星星恢复到默认状态；再把当前星星及在它之前的星星设为选中状态。
3、移出每个星星时，先把所有的星星恢复到默认状态；再把大总管变量里记录的星星及在它之前的星星设为选中状态。
4、点击星星时，把当前星星的下标赋值给大总管变量；再把当前星星及在它之前的星星设为选中状态。
二、代码展示：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul,li{ list-style: none; }
li{display:block;float: left; width: 21px; height: 21px;background: url(http://files.cnblogs.com/files/susufufu/star0.gif) no-repeat;}
li.on{background: url(http://files.cnblogs.com/files/susufufu/star1.gif) no-repeat;}
</style>
</head>
<body>
<ul id="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
window.onload = function(){
var lis = document.getElementsByTagName('li');
var lislength = lis.length;
//大总管变量
var num;
for (var i = 0; i < lislength; i++) {
//给每一个li加下标
lis[i].index = i;
lis[i].onmouseover = function(){
//鼠标进入时，先把所有的星星恢复到默认状态
for(var j=0;j<lislength;j++){
lis[j].className = '';
}
// 把当前星星以及它前面的星星设为选中状态
for(var j=0;j<=this.index;j++){
lis[j].className = 'on';
}
};
lis[i].onmouseout = function(){
//鼠标离开时，先把所有的星星恢复到默认状态
for(var j=0;j<lislength;j++){
lis[j].className = '';
}
// 把点击过的星星及它前面的星星设为选中状态
for(var j=0;j<=num;j++){
lis[j].className = 'on';
}
};
lis[i].onclick = function(){
//点击时，把当前的星星下标赋值给大总管变量，再把它前面的星星设为选中状态
num = this.index;
for(var j=0;j<=this.index;j++){
lis[j].className = 'on';
}
}
}
}
</script>
</body>
</html>
