Js交叉淡入相同的圖像

Question

我一直在試圖建立一個js來改變imagem從一些菜單我甚至可以做出來的動畫，但當我嘗試動畫它。我的腦海裏崩潰了，我不知道如何保持1 img標籤的結構並使其變得更糟糕我無法更改CSS，我試着詳盡地搜索這裏和谷歌的另一個答案，但我可以應用它爲我的代碼。我基本上需要交叉淡入淡出，在js中創建一個緩存，然後將最後一個圖像複製到它不閃爍。

var tempo1 = setInterval(rand,5000); 

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']]; 

    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 cacheDaImagem = $('.cat' + i).src; 
     change1(imagemEscolhida,parteDoArray,cacheDaImagem); 
    } 
} 

function change1(_loc1,_loc2,_loc3) { 
    $(document).ready(function() { 
     var img = document.getElementById('cat'+_loc2); 
     var newImg = new Image(); 
     newImg.src = _loc3; 
     $('#box'+_loc2).append(newImg); 
     img.src = 'themes/theshop/img/jumbotron/' + _loc1 + '.jpg'; 
     img.fadeOut(1500,deleteItem,newImg); 
    }); 
} 

function deleteItem(_loc1) { 
    _loc1.remove(); 
} 

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; 
    } 
    }