急急急~怎么实现进度查询？

图片说明

各位大神，这种进度查询的样子是怎么实现的啊？

是用javascript吗？

各位大神有例子可供小弟参考下吗~太感谢了

现在的很多人都成为了房奴，跟朋友亲戚借钱不好意思，那就来这里看看吧http://qqurl.com/M7X

 <html>
<head>
    <title>step by step</title> 
</head>
<body>
    <div id="navigatorPic" style="position:fixed;top:100px;left:100px;width:730px;height:100px;background-image:url(step1.png)">
    </div>

    <div style="color:blue;font-family:Microsoft YaHei;font-size:20px;position:relative;top:400px;left:300px;">
        click next step, submit by Ajax.
        <div id="step1" style="display:block">
            current step is step1.
        </div>
        <div id="step2" style="display:none">
            current step is step2.
        </div>
        <div id="step3" style="display:none">
            current step is step3.
        </div>
        <div id="step4" style="display:none">
            current step is step4.
        </div>
        <input type="button" value="last step" onclick="lastStep();"><input type="button" value="next step" onclick="nextStep();">
    </div>

    <script language="javascript" type="text/javascript">
        var stepIndex = 1;
        var stepNum = 4;
        function nextStep(){            
            if(stepIndex<stepNum){
                stepIndex++;
                document.getElementById("navigatorPic").style.background = "url(step"+stepIndex+".png)";
                for(var i=1;i<=stepNum;i++){
                    document.getElementById("step"+i).style.display = 'none';
                }
                document.getElementById("step"+stepIndex).style.display = 'block';
            }
        }

        function lastStep(){            
            if(stepIndex>1){
                stepIndex--;
                document.getElementById("navigatorPic").style.background = "url(step"+stepIndex+".png)";
                for(var i=1;i<=stepNum;i++){
                    document.getElementById("step"+i).style.display = 'none';
                }
                document.getElementById("step"+stepIndex).style.display = 'block';
            }
        }
    </script>
</body>
</html>

step1.png 图片说明
step2.png 图片说明
step3.png 图片说明
step4.png 图片说明

把状态保存到数据库里，然后显示的时候，根据状态，显示不同的图片，

Jquery的淡入淡出好像可以实现

jQuery时间轴特效，网上找一下很多的