如何将全局变量i变成函数的局部变量？

Question

<style>
.x1{width: 50px;height: 50px;background: red;top:50px;left:30px;position: relative;}
</style>

<div id="x" class="x1">
</div>

<script>
    var ctx = document.getElementById("x");
    var i=50;
    function z(){
        ctx.style.left = 200+i+"px";
        i = i+50;
    }
    setInterval("z()",1000);

</script>

上述代码是一个自动移动div的代码，我有两个问题：
1、如何将全局变量i变成函数z的局部变量？
2、如果要做出图片轮播的那种效果，必须使用setInterval来控制移动速度吗？有没有别的办法？

谢谢。
（p.s 重点是问题1）

Answer 1

加个闭包。

function z() {
    var i = 50;
    return function() {
        ctx.style.left = 200 + i + 'px';
        i = i + 50;
    }
}
var Z = z();
setInterval('Z()', 1000);

Answer 2

z={
    i:50,
    fun:function(){
        ctx.style.left = 200+i+"px";
        this.i+=50
    }
}

setInterval('z.fun()',1000);