jQuery를 슬라이더 나는 JQuery와 슬라이더를 만들었어요이 웹 사이트의 사용자가 나에게 (페이드 전환을 추가)을 개선하는 데 도움이 제대로

Question

작동하지 않음 (fadeIn/페이드 아웃). 피들에서는 잘 작동했지만 컴퓨터를 옮길 때 문제가 발생했습니다. 우선, 여기 피들이가 있습니다. 없음 (숨기기 클래스) 및 fadeIn/페이드와 그 변경 :

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

코드, 내가 디스플레이 이미지를 정말 간단 숨길 수있다. http://images.ezgif.com/tmp/gif_300x341_e373a4.gif

가 빨라 것 :

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

여기에 문제

(가로드하는 데 시간이 걸릴 수 있도록 IT가 그렇지 않은 경우, 여기 링크의하는 GIF 'S이다 단지 크기 이유로 당신이 버튼을 현재 이미지 desappear을 클릭하고 불과 100 밀리 초 이상 함께 aprox. 다른 이미지를로드 할 때이 문제를 볼 수없는 경우 너무.

최대

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

바이올린 http://jsfiddle.net/vishnurajv/7wPbd/

당신은 내가를 선호하는 유연한 슬라이드를 찾고 있다면