每n秒淡出变化的图像 [英] fade changing image every n seconds

问题描述

我想每3秒钟更改一次图像，但是在更改时我想做一个淡入淡出的效果，我这样做是:

I want to change an image every 3 seconds, but when changing I want to make a fade effect, to do so I was doing:

  <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>

但是不起作用，我认为问题出在

However is not working, I think the problem is in

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

有更好的方法吗?

这是jsfiddle

推荐答案

您需要使用 fadeIn()和 fadeOut()以及完整的回调函数来完成此操作

You need to use fadeIn() and fadeOut() along with the complete callbacks to do it

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++;
}

演示:小提琴

注意:在小提琴中，您错过了包含jQuery

这篇关于每n秒淡出变化的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！