Как заменить изображения при обновлении страницы?

Question

На странице есть блок с изображениями. Как при обновлении страницы заменить в данном блоке картинки (сразу 5 картинок) на JS? После обновления показать другие картинки и так по кругу.

.images {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.images img {
width: 100%;
height: 250px;
object-fit: cover;
}

<div class="images">
  <img src="https://images.unsplash.com/photo-1596182396732-26ab3db8834c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1596274243034-c89da4c3e130?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1596276202471-0f5c3aad8eb3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1596297249897-4517565266e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1596290685046-756064638d9e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=648&q=80" alt="">
</div>

Answer 1

Идея кода следующая, храним переменную в sessionStorage, каждый раз при обновлении страницы прибавляем к ней значение +1, и делаем проверку на четность или нечетность, если цифра четная то делаем одно, если нечетная то делаем другое. И так получаем повторение

let Reloaded  = function(loaded){
    //добавляем до предыдущего значения 1
    sessionStorage.setItem('load', Number(sessionStorage.getItem('load'))+1);
    //проверяем четное значение или не четное
    const even = n => !(n % 2);

    if(even(loaded)) {
        console.log("вывели картинку 1");
    }else{
        console.log("вывели картинку 2");
    }

}

window.onload = function() {
    //Берем значение sessionStorage
    let loaded = sessionStorage.getItem('load');

    //Если значения еще нет добавляем его
    if(loaded) {
        Reloaded(loaded);
    } else {
        //Задаем значение в sessionStorage 1
        sessionStorage.setItem('load', 1);
    }
}

БЛОГ НА HUSL

Как заменить изображения при обновлении страницы?

Ответы (1 шт):