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

Js交叉淡入淡出同样的图像

1 个答案: