褪色改變圖像每隔n秒

Question

我想改變的圖像，每3秒，但改變時，我想打一個淡入淡出效果，這樣做，我是這樣做的：

<script type="text/javascript"> 
    var images = []; 
    images[0] = "http://i2.ytimg.com/vi/Q1yo3mco40U/default.jpg"; 
    images[1] = "http://i2.ytimg.com/vi/ivmoCcYLrEk/default.jpg"; 
    images[2] = "http://i3.ytimg.com/vi/f7d8luQ6p2Q/default.jpg"; 
    images[3] = "http://i1.ytimg.com/vi/XzFmOKNf8sc/default.jpg"; 
    images[4] = "http://i2.ytimg.com/vi/-2m1e4g2MFM/default.jpg"; 
    images[5] = "http://i1.ytimg.com/vi/lK2TSYBh7fw/default.jpg"; 
    var loop; 
    var i = 0; 

    $(document).ready(function() { 
     setTimeout(fadeDivs, 3000); 
    }); 

    function fadeDivs() 
    { 
     $('.product img').attr('src',images[i]).fadeOut(100); 
     if (i < images.length - 1) { 
      i++;         
     } else { 
      i = 0;     
     } 
    } 
    </script> 

和：

<section id="product"> 
    <article class="product"> 
     <img src="http://i2.ytimg.com/vi/Q1yo3mco40U/default.jpg" /> 
    </article> 
</section> 

但是不工作，我認爲這個問題是在

$('.product img').attr('src',images[i]).fadeOut(100); 

有沒有更好的方式來做到這一點？

here is jsfiddle

Answer 1

您需要使用fadeIn()和整個回調沿​​做

var images = []; 
images[0] = "http://i2.ytimg.com/vi/Q1yo3mco40U/default.jpg"; 
images[1] = "http://i2.ytimg.com/vi/ivmoCcYLrEk/default.jpg"; 
images[2] = "http://i3.ytimg.com/vi/f7d8luQ6p2Q/default.jpg"; 
images[3] = "http://i1.ytimg.com/vi/XzFmOKNf8sc/default.jpg"; 
images[4] = "http://i2.ytimg.com/vi/-2m1e4g2MFM/default.jpg"; 
images[5] = "http://i1.ytimg.com/vi/lK2TSYBh7fw/default.jpg"; 

var i = 0; 
setInterval(fadeDivs, 3000); 

function fadeDivs() { 
    i = i < images.length ? i : 0; 
    $('.product img').fadeOut(100, function(){ 
     $(this).attr('src', images[i]).fadeIn(100); 
    }) 
    i++; 
} 

演示：Fiddle

注：在小提琴，你錯過了包括jQuery的