단일 이미지로 크로스 페이드

Question

이미지를 복제하는 부트 스트랩 그리드 내부에 크로스 페이드를 만들려고합니다.

문제는 이미지가 서로 쌓이지 않고 새 이미지를 생성하기도하지만 삭제하지 않는 것입니다.

var tempo1 = setInterval(rand, 6000); 

function rand() { 
    var imagensTroca = 5; 
    var grupos = [ 
    ['DFLO_0005', 'DFLO_0030', 'DFLO_0042', 'DFLO_0068', 'DFLO_0084'], 
    ['DANI_0004', 'DANI_0012', 'DANI_0020', 'DANI_0027'], 
    ['DCAV_0003', 'DCAV_0017', 'DCAV_0024'], 
    ['DCOR_0029', 'DCOR_0010', 'DCOR_0001'], 
    ['DETI_0004', 'DETI_0002', 'DETI_0007'], 
    ['DGEO_0002', 'DGEO_0009', 'DGEO_0001'], 
    ['DIND_0001', 'DIND_0006', 'DIND_0012'], 
    ['DOLD_0001', 'DOLD_0002', 'DOLD_0008'], 
    ['DPSI_0006', 'DPSI_0008', 'DPSI_0013'], 
    ['DUNI_0025', 'DUNI_0031', 'DUNI_0032'], 
    ['DVIN_0002', 'DVIN_0014', 'DVIN_0016'], 
    ['DXAD_0001', 'DXAD_0002', 'DXAD_0014'], 
    ['DFRA_0004', 'DFRA_0006', 'DFRA_0007'], 
    ['DOLH_0002', 'DOLH_0003', 'DOLH_0004'], 
    ['DYIN_0011', 'DYIN_0005', 'DYIN_0009'] 
    ]; 
    var dCheck = []; 
    for (i = 0; i < imagensTroca; i++) { 
    var parteDoArray = Math.floor(Math.random() * grupos.length); 
    var divisaoDoArray = grupos[parteDoArray].toString(); 
    var selecaoDaDivisao = divisaoDoArray.split(","); 
    var imagemEscolhida = selecaoDaDivisao[Math.floor(Math.random() * selecaoDaDivisao.length)]; 
    var img = document.getElementById('cat' + parteDoArray); 
    var cacheDaImagem = img.src; 
    if (dCheck[0] != parteDoArray) { 
     var newImg = new Image(); 
     newImg.src = cacheDaImagem; 
     $('#box' + parteDoArray).append(newImg); 
     newImg.id = "clone" + parteDoArray.toString(); 
     newImg.className += "img-circle img-clone"; 
     dCheck[0] = parteDoArray; 
     change1(imagemEscolhida, parteDoArray); 
    } 
    } 
} 

function change1(_loc1, _loc2) { 
    $(document).ready(function() { 
    var img2 = document.getElementById('cat' + _loc2); 
    img2.src = 'http://www.alargs.com/themes/theshop/img/jumbotron/' + _loc1 + '.jpg'; 
    img2.hide(); 
    $('#clone' + _loc2).stop(true).fadeOut(1000, function() { 
     $(this).remove(); 
    }); 
    $('#cat' + _loc2).fadeIn(1000); 

    }); 
} 

https://jsfiddle.net/f8xaey4t/

Answer 1

나 자신에 의해 연구되고 다른 사람이 그것을 필요로하는 경우가 여기에 그래서 그것을 만든 :

var tempo1 = setInterval(rand,3000); 
    function rand() { 
     var imagensTroca = 6; 
     var grupos = [['DFLO_0005','DFLO_0030','DFLO_0042','DFLO_0068','DFLO_0084'],['DANI_0004','DANI_0012','DANI_0020','DANI_0027'],['DCAV_0003','DCAV_0017','DCAV_0024'],['DCOR_0029','DCOR_0010','DCOR_0001'],['DETI_0004','DETI_0002','DETI_0007'],['DGEO_0002','DGEO_0009','DGEO_0001'],['DIND_0001','DIND_0006','DIND_0012'],['DOLD_0001','DOLD_0002','DOLD_0008'],['DPSI_0006','DPSI_0008','DPSI_0013'],['DUNI_0025','DUNI_0031','DUNI_0032'],['DVIN_0002','DVIN_0014','DVIN_0016'],['DXAD_0001','DXAD_0002','DXAD_0014'],['DFRA_0004','DFRA_0006','DFRA_0007'],['DOLH_0002','DOLH_0003','DOLH_0004'],['DYIN_0011','DYIN_0005','DYIN_0009']]; 
     var dCheck = []; 
     var dCheck2 = []; 
     for(i=0; i < imagensTroca; i++){ 
      var parteDoArray = Math.floor(Math.random() * grupos.length); 
      var divisaoDoArray = grupos[parteDoArray].toString(); 
      var selecaoDaDivisao = divisaoDoArray.split(","); 
      var imagemEscolhida = selecaoDaDivisao[Math.floor(Math.random() * selecaoDaDivisao.length)]; 
      var img = document.getElementById('cat' + parteDoArray); 
      var cacheDaImagem = img.src; 
       if(check(dCheck,imagemEscolhida)===true && check(dCheck2,parteDoArray)===true){ 
        var newImg = new Image(); 
        newImg.src = cacheDaImagem; 
        $('#box'+parteDoArray).append(newImg); 
        newImg.id = "clone"+parteDoArray; 
        newImg.className += "img-circle img-clone"; 
        dCheck[i] = imagemEscolhida; 
        dCheck2[i] = parteDoArray; 
        change1(imagemEscolhida,parteDoArray); 
        $('#clone'+parteDoArray).fadeOut(1000,function() { for(k=0; k<= grupos.length; k++){ $('#clone'+k).remove();}}); 
        $('#cat'+parteDoArray).fadeIn(1000); 
      } 
     } 
    } 
    function change1(_loc1,_loc2){ 
     $(document).ready(function() { 
      var img2 = document.getElementById('cat'+_loc2); 
      img2.src = 'themes/theshop/img/jumbotron/' + _loc1 + '.jpg'; 
     }); 
    } 
    function check(arr,test) { 
     var i; 
     for (i = 0; i <= arr.length; i++) { 
     if (arr[i] === test) { 
      return false; 
     } 
     }