Смена фона

<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
 
  #app {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: red;
    transition: all .4s;
  }
 
  #app img {
    max-width: 400px;
    height: auto;
  }
 
</style>
 
<main id="app">
  <figure>
    <img src="https://placehold.it/400x400?text=IMAGE1">
  </figure>
</main>
 
<script type="text/javascript">
  const images = [
    "https://placehold.it/400x400?text=IMAGE1",
    "https://placehold.it/400x400?text=IMAGE2",
    "https://placehold.it/400x400?text=IMAGE3"
  ];
 
  const colors = ['red', 'green', 'blue', 'yellow', 'cyan'];
 
  const App = {
    data: {
      images,
      colors,
    },
    state: {
      image: 0,
      color: 0,
    },
    changeImage() {
      this.state.image++;
 
      if (this.state.image === this.data.images.length) {
        this.state.image = 0;
        this.changeColor();
      }
 
      this.img.src = this.data.images[this.state.image];
    },
    changeColor() {
      this.state.color++;
 
      if (this.state.color === this.data.colors.length) {
        this.state.color = 0;
      }
 
      this.root.style.backgroundColor = this.data.colors[this.state.color];
    },
    run(id) {
      this.root = document.querySelector(id);
      this.img = this.root.querySelector('img');
      this.img.addEventListener('click', () => {
        this.changeImage();
      });
    }
  }
 
  App.run('#app');
 
</script>