jQuery的交错淡出幻灯片不工作corectly

Question

您好我是初学者jQuery的用户，我想创建一个交叉衰减效应，但似乎我似乎无法选择corect element.This是我的代码：

<ul id="slideimage"> 
    <li ><img src="img/slider/pic/slide01.jpg" alt="img" class="active"/></li> 
    <li><img src="img/slider/pic/slide02.jpg" alt="img" /></li> 
    <li><img src="img/slider/pic/slide03.jpg" alt="img"/></li> 
    <li><img src="img/slider/pic/slide04.jpg" alt="img"/></li> 
    <li><img src="img/slider/pic/slide05.jpg" alt="img"/></li> 
    <li><img src="img/slider/pic/slide06.jpg" alt="img"/></li> 
</ul> 

ul#slideimage li img{ 
      position: absolute; 
      width:100%; 
      height: 500px; 
      z-index: 0; 
      } 
ul#slideimage li img.active{ 
      z-index: 10; 
      } 

(function(){ 
     setInterval("slideshow()" , 2000); 
})(); 

function slideshow(){ 
      var $first = $('ul#slideimage li img:first'); 
      var $active = $('ul#slideimage li img.active'); 
      var $next = $active.next('ul#slideimage li img').length ? $active.next('ul#slideimage li img'): $first; 
         console.log($next); 

         $active.animate({'opacity':'0'},1000,function(){ 
          $(this).removeClass('active').css({'opacity':'1'}); 
         }); 
         $next.addClass('active'); 
        } 

代码的问题是什么，它保持淡出第一个图像，然后使其再次出现。我认为我没有设法正确定位下一个元素，但是我一直试图在最后3个小时内没有做到这一点，没有成功。有些帮助将不胜感激。

Answer 1

你有相当的提供的代码结构的一些语法错误，但见下图：

<style> 
    ul#slideimage li img{ 
     position: absolute; 
     width:100%; 
     height: 500px; 
     z-index: 0; 
    } 
    ul#slideimage li img.active{ 
     z-index: 10; 
    } 
    </style> 
    <script type="text/javascript"> 
     var counter=0; 
     function slideshow(){ 
      var total = $('ul#slideimage li img').size(); 
      var $active= $('ul#slideimage li img'); 
      $active.filter(function(index){return index== counter % total}) 
      .animate({'opacity':'0'},1000,function(){ 
       $(this).css({'opacity':'1'}); 
      }); 
      counter++; 
     } 


     $(function() {     
      slideshow();     
      setInterval(slideshow, 2000); 
     }); 
    </script>