Показать сообщение отдельно
  #1 (permalink)  
Старый 10.02.2024, 13:55
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 80

Как исправить появление лишней картинки?
Делаю анимационную открытку к юбилею друга-рыбака. Проблема в том, что после показа нужных картинок (картинки фраз с вставленным в них текстом), на экране, слева внизу, появляется лишняя картинка, изображающая фразы. Подскажите как исправить данную проблему.
const frazas = [
    {src: "pictures/Fraza_L.png",  
    imgpos: [180, 516],  
    text: "Час сидим<br> клёва нет.",   
    textpos: [208, 545]
    },            
    {src: "pictures/Fraza_P.png",  
    imgpos: [172, 739],  
    text: "Непруха <br> сегодня. ",   
    textpos: [200, 770]
    },                       
     {src: "pictures/Fraza_P.png",  
    imgpos: [165, 871],  
    text: "С клёвом <br> тишина.",  
    textpos: [195, 895]
    },      
   {src: "pictures/Fraza_L.png",  
    imgpos: [180, 516],  
    text: "Вот и Андрюха<br> на горизонте!",   
    textpos: [205, 528]
    },
    {src: "pictures/Fraza_P.png",  
    imgpos: [172, 739],  
    text: "Андрюха <br> клёва нет!",   
    textpos: [200, 770]
    },                       
     {src: "pictures/Fraza_P.png",  
    imgpos: [165, 871],  
    text: "Клевать <br> не будет!",  
    textpos: [195, 895]
    },
     {src: "pictures/Fraza_L.png",  
    imgpos: [180, 516],  
    text: "У Андрюхи<br> жор начался!",   
    textpos: [205, 528]
    },
    {src: "pictures/Fraza_P.png",  
    imgpos: [172, 739],  
    text: "Во попёрло!!!",   
    textpos: [208, 755]
    },                       
     {src: "pictures/Fraza_P.png",  
    imgpos: [165, 871],  
    text: "Нам бы так!",  
    textpos: [206, 889]
    },

    {src: "pictures/Fraza_L.png",  
    imgpos: [180, 516],  
    text: "Сойди!!! <br> Сойди!!!",   
    textpos: [205, 528]
    },
    {src: "pictures/Fraza_P.png",  
    imgpos: [172, 739],  
    text: "У него <br> не сойдёт.",   
    textpos: [208, 755]
    },                       
     {src: "pictures/Fraza_P.png",  
    imgpos: [165, 871],  
    text: "Чем кормил?",  
    textpos: [206, 889]
    },
    {src: "pictures/Fraza_L.png",  
    imgpos: [180, 516],  
    text: "На что ловишь?",   
    textpos: [205, 528]
    },
    {src: "pictures/Fraza_P.png",  
    imgpos: [172, 739],  
    text: "Продай секрет.",   
    textpos: [208, 755]
    },                       
     {src: "pictures/Fraza_P.png",  
    imgpos: [165, 871],  
    text: "Ставлю литр!!!",  
    textpos: [206, 889]
    },
      {src: "pictures/Fraza_L.png",  
    imgpos: [180, 516],  
    text: "Рука не устала?",   
    textpos: [205, 528]
    },
    {src: "pictures/Fraza_P.png",  
    imgpos: [172, 739],  
    text: "Оставь <br> на завтра.",   
    textpos: [208, 755]
    },                       
     {src: "pictures/Fraza_P.png",  
    imgpos: [165, 871],  
    text: "Завтра ведро <br> побольше.",  
    textpos: [206, 889]
    },                                            
];
 
const fishImages = [
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
];
 
const fishImages_1 = [
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
    {src: "pictures/Karas_P.gif", pos: [330, 600]},
    {src: "pictures/Karas_L.gif", pos: [345, 670]},
     {src: "pictures/Karas_P.gif", pos: [330, 600]},

];


 
const img = document.querySelector('.fraza img');
const txt = document.querySelector('.fraza b');
 
const delay = (t) => new Promise (r => setTimeout(r, t))
 
async function cycle () {  
    await delay(4500);
    for (let f of fishImages) {
        img.src = f.src;
        img.style = `top: ${f.pos[0]}px; left: ${f.pos[1]}px;`
        await delay(4500);
    }
	img.style = 'opacity: 0;'  
await delay(6500);
    for (let f of frazas) {
        img.src = f.src;
        img.style = `top: ${f.imgpos[0]}px; left: ${f.imgpos[1]}px; opacity: 1;`
        txt.innerHTML = f.text
        txt.style = `top: ${f.textpos[0]}px; left: ${f.textpos[1]}px; opacity: 1;`
        await delay(3000);
        img.style = `top: ${f.imgpos[0]}px; left: ${f.imgpos[1]}px; opacity: 0;`
        txt.innerHTML = f.text
        txt.style = `top: ${f.textpos[0]}px; left: ${f.textpos[1]}px; opacity: 0;`
        await delay(1500);
    }

    txt.textContent = '';    
    img.style.display = 'none';  
 
 
	img.style = 'opacity: 1;'  
    await delay(4500);
    for (let f of fishImages_1) {
        img.src = f.src;
        img.style = `top: ${f.pos[0]}px; left: ${f.pos[1]}px;`
        await delay(4500);
    }

}
 
cycle();

Файл представил.
Вложения:
Тип файла: zip 123.zip (5.56 Мб, 1 просмотров)
Ответить с цитированием