서로 계속되는 연속적인 이벤트 실행하기

Question

2 일 동안이 작업을 해왔습니다. Javascript/Jquery를 처음 사용하며 학습 과정에 있습니다.

페이지가로드 될 때 자바 스크립트를 만들려고하는데 이미지가 페이드 인되어 페이드 아웃되고 첫 번째 이미지가 페이드 인 및 페이드 아웃 한 후 두 번째, 세 번째 등등 필요한 많은 것들이 있습니다.

나는 이것이 newby 문제라는 것을 알고 있지만, 나는이 시점에서 무엇을 찾아야할지 분명히 확신하지 못했다. 그리고 나는 그 동안 연구와 학습을 해오 고 있으며, 내가 성취 할 수있는 것보다 빨리 그것을 갖고 싶습니다.

도움을 주시면 감사하겠습니다. 당신은 an array을 사용할 수 있으며 현재 이미지를 포함하는 변수가 다음에 그들을 페이드 아웃

<div class="splashbg1" style="display: none;"></div> 
<div class="splashbg2" style="display: none;"></div> 
<div class="splashbg3" style="display: none;"></div> 
<div class="splashbg4" style="display: none;"></div> 
<div class="splashbg5" style="display: none;"></div> 


<script> 
$(document).ready(function() { 
    $('.splashbg1').fadeIn(1300, function() { 
    $('.splashbg1').fadeOut(1300, function() { 
    $('.splashbg2').fadeIn(1300, function() { 
    $('.splashbg2').fadeOut(1300, function() { 
    $('.splashbg3').fadeIn(1300, function() { 
    $('.splashbg3').fadeOut(1300, function() { 
    $('.splashbg4').fadeIn(1300, function() { 
    $('.splashbg4').fadeOut(1300, function() { 
    $('.splashbg5').fadeIn(1300, function() { 
    }); 
    }); 
    }); 
    }); 
    }); 
    }); 
    }); 
    }); 
    }); 
}); 
</script> 

Answer 1

예를 들어, HTML :

<div id="images> 
    <img src=""> 
    <img src=""> 
    ... 
</div> 

예를 들어 자바 스크립트 :

function switchImage(){ 
    $('#images img:visible').fadeOut(function(){ 
     $(this).next().length ? $(this).next().fadeIn() : $('#images img').eq(0).fadeIn(); 
    }); 
}; 
$('#images img').hide().eq(0).show(); // show only the first image 
setInterval(switchImage, 2000); // loop through images every 2000 milliseconds 

예 :

Answer 2

: 이것은 완전히 잘못된 보이지만 작동하는 것 같다 나에게있는 해낸

. 이미지 저장 방법에 따라 다릅니다. 당신이 myImg의 ID와 하나 개 <img> 요소가있는 경우, 예를 들어, 당신이 할 수 있습니다 : 당신이 포장을 원한다면, 당신은 images[currentImage % images.length]을 할 수

var images = ['http://someurl.com/someimg.jpg', 'somethingelse.png', 'hello.gif']; 
var currentImage = 0; 

function next() { 
    $('#myImg').fadeOut(function() { 
     $('#myImg').prop('src', images[currentImage]).fadeIn(); // Set the image and fade in 
     currentImage++; // Get ready for the next image 
    }); 
} 

next(); 

. 여러 이미지가있는 경우 동일한 작업을 수행 할 수 있습니다. 대신 이미지 ID를 images으로 유지하십시오.

Answer 3

http://jsfiddle.net/ampersand/nhp2v/ 나는 아래 sequence라는 빠른 기능을 썼다. 이미지의 목록을 만들고이 같은 jQuery를 선택기를 사용하여 애니메이션 싶습니다

var list = [ 
    $('first'), 
    $('second'), 
    $('third') 
    ]; 

그런 다음 나는 아직 그래서 그것을 테스트하지 않은이 sequence(list, 200, function(){});

var sequence = function(array, duration, callback){ 
    var list = array, 
     length = list.length, 
     i = 0, 
     duration = duration, 
     callback = callback; 

    function chainFade(){ 
     if(i < length) 
      array[i].fadeIn(duration) 
        .fadeOut(duration, function(){ 
         i++; 
         chainFade(); 
        }); 
     else 
      typeof callback == 'function' && callback(); 
    } 
    chainFade(); 
}; 

처럼 뭔가 아래의 함수를 호출 네가 어떤 버그에 빠지면 알려줘.