Плавная смена картинок по нажатию кнопки - JavaScript для начинающих

soft42 — Wed, 30 Sep 2026 14:13:01 GMT

Добрый день. Столкнулся с проблемой.
Я вывожу картинку на экран и две кнопки. При нажатии любой кнопки меняю эту картинку.
Выбросил всё лишнее, остался только требуемый функционал. По нажатию любой кнопки картинка меняется, все отлично.
Но я хочу менять картинки плавно. Добавил класс visible и opacity+transition. При первом нажатии картика быстро меняется и плавно гаснет, пустой экран.
При втором нажатии появляется плавно новая картинка, это хорошо. При следующем нажатии опять резкая смена и плавное затухание картики.
Тоесть работает через раз.

#content2  { 

       width: 100%; 

       height: 82%; 

       text-align: center; 

}

#fram { 

        width: 90%;

        height: 80%;

        object-fit: contain;

        opacity: 0;

        transition: opacity 1s ease-in-out;

}

#fram.visible { 

        opacity: 1;

}

let step=1;

var tickets = [ ["Image"],  ["img/Vasnetsov-vitaz-crossroad.jpg"],  ["img/Vasnetsov-alyonushka.jpg"],  ["img/Vasnetsov-warriors-pocalypse.jpg"],  ["img/Vasnetsov-bogatyrs.jpg"],  ["img/Vasnetsov-spyashaya-carevna.jpg"] ];



document.addEventListener('DOMContentLoaded', function() { // Код, который должен выполниться после полной загрузки DOM (HTML)

  console.log('DOM is fully loaded and parsed.'); //DOM полностью загружен и разобран

  Main(); // Теперь можно безопасно работать с элементами страницы, исключается ошибка «Cannot read properties of null (reading 'style')»

});



function Main() { 

        Answ(); 

}



function Answ() { //выводим картинку, кнопки

        const fr = document.getElementById("fram"); fr.src=tickets[step];  fr.classList.toggle('visible');

}



function Answer(d) { //Принимаем ответ

        step++;

        if ( step>5 ) { step=1; }

        Answ();

}

Ну и вопрос, как плавно менять картинки? Вроде как это слайдер, но в рассматриваемых примерах везде несколько IMG, а у меня в одном IMG все процессы. Лучше конечно чистый CSS + JS.

Добавлено через 4 часа 10 минут
Пока никто не откликнулся. Копаю сам. Переделал функционал.

#img8 { 

        width: 90%;

        height: 80%;

        object-fit: contain;

}

function Answ() { //выводим картинку

        var fr = document.getElementById("img8"); fr.src=tickets[step]; fr.style.opacity = 1; 

        FadeOn();

}



function Answer(d) { //Принимаем нажатие кнопки

        step++;

        if ( step>5 ) { step=1; }

        Answ();

}



function FadeOn() { //элемент становится прозрачным, невидимым

       var img88 = document.images.img8;

       img88.style.opacity -= 0.05;

       if (img88.style.opacity>0)  { setTimeout(() => { FadeOn(); }, 100); } 

}

Картинка появляется резко в полный рост и после нажатия кнопки плавно растворяется.
Каждая картинка, без всяких пропусков. Теперь надо переделать наоборот. Чтобы появлялась плавно.

Работа с локально подключенным js файлом - JavaScript для начинающих

russiannick — Mon, 28 Sep 2026 05:18:44 GMT

Хелоу дие ситезен оф форум! Доброго утра.
Имею файл "f3.js"

window.m='mmm';

подключаю к основному файлу так

и вызываю в основном файле:

console.log(window.m);

дает undefined. Как исправить? Заранее спасибо.

JavaScript - Форум программистов и сисадминов Киберфорум

Плавная смена картинок по нажатию кнопки - JavaScript для начинающих

Работа с локально подключенным js файлом - JavaScript для начинающих