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