怎么让img在div中平移，做成进度条的功能

如图，暗的进度条是div的背景，亮的是img,请问怎么让亮的在上面移动，一次移一格，然后再重新开始移动，就是进度条的样子，麻烦上一下代码，感谢!

<div style="width: 300px; height: 30px; overflow: hidden; background: url('bg.png');">
<img id="img" src="a.png" width="300" height="30" style="margin-left: -300px;" />
</div>
<script type="text/javascript">
var img = document.getElementById("img");
var ml = 0;
setInterval(function(){
    ml += 30;
    if (ml>0)
        ml = -300;
    img.style.marginLeft = ml+"px";
}, 500);
</script>

我建议将每一小段做成图片，这样会很好做。依次在后面追加img就可以了

我建议图片先放上面，然后在上面加个黑色的雾罩，根据长度使雾罩缩短就好

同意楼上加罩子的做法，相对于加img的方法，缩小罩子的方法会节省操作。