jQuery滑块（fadeIn/fadeOut）无法正常工作

我做了一个jQuery滑块，本网站的用户帮助我改进它（添加淡入淡出转换）。在小提琴中它工作正常，但是当我将它移到我的电脑时，它产生了一个问题，首先，这里是小提琴。jQuery滑块（fadeIn/fadeOut）无法正常工作

代码是非常简单的，我隐藏与显示图像：无（隐藏类），改变与淡入/淡出。

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

和这里的问题是

enter image description here

（这是一个GIF所以它可能需要一些时间来加载，如果没有，这里的链接：http://images.ezgif.com/tmp/gif_300x341_e373a4.gif

它的飞车只是出于尺寸的原因，所以如果你看不到问题，当你点击一个按钮时，当前图像消失，并且仅在100毫秒后，aprox。另一个图像加载。

我试过.delay（），但它也没有工作。

来源

2014-04-21 nick

所以它在小提琴中工作，但不是你的网站？检查控制台是否有错误？ – j08691

我该怎么做？抱歉，我很新 – nick

@nick如果你使用的是Chrome，请按F12。点击名为console的标签。如果有错误，它们会变成红色。 – MiniRagnarok

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'); 
     }); 
    }

小提琴http://jsfiddle.net/vishnurajv/7wPbd/

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

来源

2014-04-21 20:29:58

谢谢，它工作正常，但有一种方法可以使其响应？我试过，但打破了“滑块”完成 – nick

http://flexslider.woothemes.com/是你在找什么。如果它是有用的，则标记为答案。 :) –

我试过了，但它好像你不能把两个滑块放在同一个页面中...... – nick

jQuery滑块（fadeIn/fadeOut）无法正常工作

回答

相关问题