이미지가 페이드 아웃 한 후에 페이드 인하지 않습니다.

-1

내 슬라이더 이미지가 페이드 아웃되었지만 페이드 인이 적용되었지만 다른 슬라이더 이미지가 나타나지 않습니다. 또한 루프 기능을 만들었지 만 작동하지 않습니다. 첫 번째 이미지 만 페이드 인 및 페이드 아웃되지만 나중에는 아무 것도 페이드 인하 지 않습니다.이미지가 페이드 아웃 한 후에 페이드 인하지 않습니다.

JS 바이올린 - http://jsfiddle.net/qust3upk/3/

<div id="slider"> 
      <img id="pic1" src="images/main-banner.png" alt="main banner" class="main_banner"> 
      <img id="pic2" src="images/nutrition-banner.png" alt="nutrition banner" class="main_banner "> 
     </div> 
     <a href="#" class="previous">Previous</a> 
     <a href="#" class="next">Next</a> 



<script type="text/javascript"> 

sliderInt = 1; 
sliderNext = 2; 

$(document).ready(function(){ 
    $('#slider #pic1').fadeIn(300); 
    startSlider(); 


}); 

function startSlider(){ 
    count = $('#slider img').size(); 
    loop = setInterval(function(){ 

    $('#slider img').fadeOut(300); 
    $('#slider img#' + sliderNext).fadeIn(300); 

    sliderInt = sliderNext; 
    sliderNext = sliderNext + 1; 

    }, 3000) 



} 


</script>

출처

2014-09-22 Ralphunreal

당신이 오류 메시지를 받고있다 (나는 그것을 조금 수정하고 그 참조를 해결 않았다)인가? –

"3000)"->, 3000) 뒤에 세미콜론이 필요합니다. –

html로 숫자 ID가 없습니다 – charlietfl

-1

재 작성이 코드 블록 :

loop = setInterval(function(){ 

$('#slider img').fadeOut(300); 
$('#slider img#' + sliderNext).fadeIn(300); 

sliderInt = sliderNext; 
sliderNext = sliderNext + 1; 

}, 3000)

가로 :

loop = setInterval(function(){ 

$('#slider img').fadeOut(300); 
$('#slider img#pic' + sliderNext).fadeIn(300); 

sliderInt = sliderNext; 
sliderNext = (sliderNext === count) ? sliderNext = 1 : sliderNext + 1; 

}, 3000); //You should have a semicolon here

출처

2014-09-22 00:49:03

슬라이더에 두 개의 이미지 만 있습니다. + + 당신이 넣어 작품하지만, 같은 두 번째 이미지가 첫 번째 이미지 등을 다시 시작하는 대신 나타나는 유지하는 하나입니다 통지 또한 1과 2로 이미지의 HTML에서 ID를 변경 실수로 지적했다 여기에있는 사용자 중 한 명이 있습니다. – Ralphunreal

이 답변이 실제로 효과가 있었습니까? 나는 그것을 시도했지만 그렇지 않을 것이다. 그냥 궁금해서 – andrex

나는 그것을 수정했지만 그는 나에게 아이디어를 주었다. ++ 대신에 나는 여전히 1을 남겼습니다. 그리고 if 문을 만들었습니다 : if (sliderNext> count) { \t \t sliderNext = 1; \t \t sliderInt = 1; \t} – Ralphunreal

당신은 잘못된 ID로 이미지를 참조한다. 시도 :

$('#slider #pic' + sliderNext).fadeIn(300);

또한 'count'변수를 사용하고 있지 않습니다. 또한이 변경 :

sliderNext = (sliderNext % count) + 1;

출처

2014-09-22 00:49:45

-1

당신은

그러나 jquery.fadeOut 물론 당신은 또한 필요 맞아 그건 당신은 여기에서 자세한 내용을 읽을 수있는이

$('#slider img').fadeOut(300, function(){ 
     $('#slider img#' +).fadeIn(300); 
    });

같은 페이드 아웃 효과 후 함수를 호출 할 수 있습니다 올바른 참조가 필요합니다.

코드에서 img 태그에 대한 참조가 올바르게 수행되지 않았습니다. 그래서 첫 번째 이미지 만 페이드 인 및 페이드 아웃 한 다음 중지합니다.

이 코드 줄 $('#slider img').fadeOut(300);은 모든 img 태그를 fadeOut합니다. 그리고이 코드 줄 $('#slider img#' + sliderNext).fadeIn(300);은 img에 ID가 1 (id="1")이되지만, html로는 id="pic1"이됩니다. 여기

작동 코드의 버전이

<script> 
var sliderNext = 1; 

jQuery(document).ready(function(){ 
    jQuery('#slider img#pic' + sliderNext).fadeIn(300); 
    startSlider(); 
}); 

function startSlider(){ 
    var count = jQuery('#slider img.main_banner').size(); 
    loop = setInterval(function(){ 
     jQuery('#slider img#pic' + sliderNext).fadeOut(300, function(){ 
      sliderNext += 1; 
      if(sliderNext > count){ 
      sliderNext = 1; 
      } 
      jQuery('#slider img#pic' + sliderNext).fadeIn(300); 
     }); 
    }, 3000) 
} 
</script>

출처

2014-09-22 01:04:44 andrex

이미지가 페이드 아웃 한 후에 페이드 인하지 않습니다.

답변

관련 문제