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

Question

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

Answer 1

<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>