JQuery下实现三张图片的自动播放 . 关于fadeIn()和fadeOut()的较原理的问题

在

• 无序列表中放入三张图片，想用jquery实现三张图片的自动播放效果：
  html代码如下：

<ul>
    <li style="display:block"><img src="1.jpg"/></li>
    <!-- 在<li>中写了display:none隐藏三张图片.固此处在该图片处写了display:block
    将此张图片显示，作为滚动的开头 -->
    <li><img src="2.jpg"/></li>
    <li><img src="3.jpg"/></li>
</ul>

css代码如下：

    <style type="text/css">
    body{margin:0 auto;background: #000;border: solid 1px red;}
    ul{margin:0px;border: solid yellow 1px;padding:0px;position: relative;}
    li{display: none;border: solid red 1px;width: 750px;height: 500px;margin:0 auto;position:absolute;}
    img{display:inline-block;width:750px;height: 500px;}
    </style>

jquery代码如下：

    <script type="text/javascript">
    $(function(){
        var order = 0;  //order变量用于图片的计数
        var change = setInterval(function(){
            order++;
            if(order == $("li").length){
                order = 0;}
            show(order);
        },3000);
        function show(order){
            $("li").eq(order - 1).fadeOut(600); //将上一张图片隐藏
            $("li").eq(order).fadeIn(600); //将这张图片出现
        };
    })
    </script>

OK，问题出现了（此处，要隐藏的上张图片用a表示，要显示的此张图片用b表示）：

Q1 ：show(order)方法中，一共写了两条语句。
不是应该顺序执行，将第一条语句执行完成后再执行第二条语句吗？即对a，调用fadeOut()方法调用完后（此时a已经不再占用它的位置），然后执行第二句，调用fadeIn()方法将b在a的位置显示出来吗？ .... 但是，实际情况是a在消失的过程中，b在a图片的下方已经占用了位置，开始渐渐的显示了，当a消失后，b图片上去填补上a的位置... fadeIn()与fadeOut()里面的具体细节是什么？产生上述情况的原因是什么？求指教！！ ORZ！！
--->如果在

• 中添加上position:relative,倒是可以避免出现上述问题，使得
• 中只显示一张图片，这是为什么？

  Q2 ：同一标签（比如此处的

• 标签）的不同元素的不同index值是怎样产生的？产生的机制是什么？

  Q3：在显示完第三张图片后，应把第三张图片隐藏，然后显示第1张图片。调了很久，只有将order值定为0，即：

  if(order == $("li").length){order = 0;}
  

  才能是第三张图片消失。但是如果order = 0的话，show(order)方法中，eq(order-1)获得的是eq(-1)！！选择器获得的应该是index值为-1的元素吧... 为什么能操作第三张图片？第三张图片的index值不是2吗？难道元素的index值是个循环的？
  希望大家多多指教！！