Question

如何用jquery循环显示元素中的内容

内容如下：
<ul>
<li class="picPanel"><img src="1.jpg"></li>

<li class="picPanel"><img src="2.jpg"></li>
<li class="picPanel"><img src="3.jpg"></li>
<li class="picPanel"><img src="4.jpg"></li>
<li class="picPanel"><img src="5.jpg"></li>
<li class="picPanel"><img src="6.jpg"></li>
</ul>
现在要求用jquery循环显示li元素中的图片（通过透明度和z-index来显示），当页面加载完成后默认显示第一张图片，然后开始循环显示，我自己写的代码有问题，代码如下：
$(function(){
$(".picPanel").first().css({opacity:"1", "z-index":"1"});
var i = 1, t = $(".picPanel").length - 1, tmp = setInterval(function(){
$(".picPanel").animate({"z-index":"0", opacity:"0"},200).eq(i < t ? i++ : i = 0).animate({"z-index":"1", opacity:"1"},200);
}, 3000);
});

Answer 1

javascript:
$(function(){
   var li = $('li'),
      len = li.size() - 1,
      n = 0,
      outIndex = 0;
   function fade(){
      li.eq(n).fadeIn();
      outIndex = (n - 1) < 0 ? len : n - 1;
      li.eq(outIndex).fadeOut();
      if(n < len){
         n++
      }else{
         n = 0;
      }
   }
   fade();
   setInterval(function(){
      fade();
   },2000);
})

css:
ul{
   position: relative;
}
li{
   display: none;
   position: absolute;
   top:0;
   left: 0;
}

Answer 2

图片在<img>节点标签上，不在<li>节点标签上，所以说定位错了

追问

这个不关图片的事，之前对li设置z-index：0，opacity：0，我现在让他变成1达到循环播放的目的