fadeOut, fadeIn 및 stop

이미지를 어떻게 페이드 인하며 아래 코드를 사용하지 않을 수 있습니까? 내가 무엇에 추가합니까? 정답을 미리 알려 주시면 감사하겠습니다.fadeOut, fadeIn 및 stop

HTML :

<div class="fadeImg" > 
    <img src="images/25sprout.jpg"> 
    <img style="display:none;" src="images/alex.jpg"> 
    <img style="display:none;" src="images/thundersha.jpg"> 
    <img style="display:none;" src="images/cathy.jpg"> 
    <img style="display:none;" src="images/david.jpg"> 
</div>

JQuery와 : 순수 주의자는이를 좋아하지 않을 수도 있지만

function nextFadeIn() { 
    if ($current >= $imgNum) return; 
    //make image fade in and fade out at one time, without splash vsual;

는 그것이 의미로 : $current 일치 $imgNum 때

귀하의 간단한 방법은

<script type="text/javascript" src="js/package/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    $next = 1;   // fixed, please do not modfy; 
    $current = 0;  // fixed, please do not modfy; 
    $interval = 4000; // You can set single picture show time; 
    $fadeTime = 800; // You can set fadeing-transition time; 
    $imgNum = 5;  // How many pictures do you have 

    $(document).ready(function(){ 
     //NOTE : Div Wrapper should with css: relative; 
     //NOTE : img should with css: absolute; 
     //NOTE : img Width & Height can change by you; 
     $('.fadeImg').css('position','relative'); 
     $('.fadeImg img').css({'position':'absolute','width':'332px','height':'500px'}); 

     nextFadeIn(); 
    }); 

    function nextFadeIn(){ 
     //make image fade in and fade out at one time, without splash vsual; 
     $('.fadeImg img').eq($current).delay($interval).fadeOut($fadeTime) 
      .end().eq($next).delay($interval).hide().fadeIn($fadeTime, nextFadeIn); 

     // if You have 5 images, then (eq) range is 0~4 
     // so we should reset to 0 when value > 4; 
     if($next < $imgNum-1){ $next++; } else { $next = 0;} 
     if($current < $imgNum-1){ $current++; } else { $current =0; } 
    }; 
</script>

출처

2016-06-21 Emily Kendall Shortell

이 코드를 복사하여 내 코드에 붙여 넣기 만하고 * fadeImg *라는 이름을 내 수업의 이름 인 topHeroImage *로 변경했습니다. 나는 또한 5 가지가 아닌 2 가지 이미지를 사용하고 있으므로 $ imgNum = 2로 변경했습니다. 나는 극적으로 자바 스크립트에 익숙하지만 나는 배우고있다. 나는 거기에 .stop을 추가하는 방법이 있다는 것을 알고있다. 나는 그저 멈추지 않게해야한다. –

명시된 요구 사항이 코드와 일치하지 않습니다. 그냥'$ ("id #") .fadeIn();'. 어쩌면 당신은 당신이 무엇을하려고하는지 설명 할 수 있으며 왜이 플러그인이 좀 더 단순한 코드가 아니라 그것을 해결한다고 생각하는지 설명 할 수 있습니다. –

여기 내가 코딩 했어 : http://assets.daddario.com/landing_calftone/calftone_landing.html 맨 위 헤더 이미지는 반복적 인 png가 있습니다. 나는 25sproutLab에서 이것을 발견하고 javacript 또는 jquery를 작성하는 법을 모릅니다. 첫 번째 png에서 시작하여 다음 png로 페이딩하는 것까지 훌륭하게 작동하지만 두 번째 이미지에서 멈추고 루핑 대신 멈추는 방법을 알지 못합니다. 전체 코드를 작성하는 방법을 모르겠다. 정말 미안 해요. 이젠 새로운데. 나랑 같이 해결해 주셔서 고맙습니다. @ freedom-m –

이 중지 nextFadeIn()의 추가 반복, 그것은 당신이 최소한의 변경만으로 필요한 것.

출처

2016-06-21 18:45:39

그것이 효과가있다! 정말 감사합니다! –

답변

관련 문제