jQuery slider (淡入/淡出)无法正常工作

Question

我制作了一个 jquery slider ，本网站的一位用户帮助我改进了它(添加淡入淡出过渡)。在 fiddle 中它运行良好，但是当我将它移到我的计算机时它产生了一个问题，首先，这是 fiddle 。

http://jsfiddle.net/CWkQE/14/

代码非常简单，我用 display: none (隐藏类)隐藏图像，然后用 fadeIn/fadeOut 改变它。

$("active image").fadeIn();
$("to hide image").fadeOut();
$("to hide image").fadeOut();
$("to hide image").fadeOut();

问题来了

(这是一个 GIF，因此可能需要一些时间才能加载，如果没有加载，请点击此处链接:http://images.ezgif.com/tmp/gif_300x341_e373a4.gif

它只是因为大小的原因而加速，所以如果你看不到问题，当你点击一个按钮时，当前图像消失，大约 100 毫秒后。加载其他图像。

我尝试过使用 .delay() 但它也没有用。

Answer 1

html

<div id="cycler" style="position:fixed;top:0;">
        <img class="active" src="http://www.gettyimages.com/CMS/StaticContent/1357941082241_new_banner-700x465.jpg" alt="Hoverfly on a green leaf" title="Hoverfly on a green leaf" width="506" height="337" />
        <img src="http://www.royaltyfreeimages.net/wp-content/uploads/2010/09/royalty-free-images-mushroom-500x375.jpg" alt="Fly on a pink flower" title="Fly on a pink flower" width="506" height="337"  />
        <img src="http://www.menucool.com/slider/prod/image-slider-1.jpg" alt="Insect on a leaf" title="Platycheirus granditarsus (I think) on a leaf" width="506" height="337"  />

    </div>
    <div style="margin-top:350px;">
    <button onclick="cycleImages(1)">1</button>
    <button onclick="cycleImages(2)">2</button>
    <button onclick="cycleImages(3)">3</button>
</div>

CSS

#cycler{position:relative;}
#cycler img{position:absolute;z-index:1;background-color:white}
#cycler img.active{z-index:3}

脚本

function cycleImages(n){
      var $active = $('#cycler .active');
      var $next = $('#cycler img:nth-child('+n+')');
      $next.css('z-index',2);
      $active.fadeOut(1500,function(){
          $active.css('z-index',1).show().removeClass('active');
          $next.css('z-index',3).addClass('active');
      });
    }

fiddle http://jsfiddle.net/vishnurajv/7wPbd/

如果您正在寻找灵活的幻灯片，我更喜欢 flexslider