使用单个 img 交叉淡入淡出

Question

我正在尝试在复制图像的 bootstrap 网格内制作淡入淡出。

问题是图像不会相互堆叠，有时会创建新图像 - 但不会删除它们。

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

使用单个 img 交叉淡入淡出

Crossfading with a single img

javascript

jquery

cross-fade