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>