如何将全局变量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）