用箭头更改文本和图像

Question

单击后退/前进箭头时是否有简单的方法可以更改文本和图像？

我不知道是否最好在点击时更改所有内容，或者在点击时让div在另一个上面，我会很感激一个过渡的例子，所以我可以自己添加更多。

＆＃13;

＆＃13;

#hi h1 {
  margin-top: 5%;
  color: white;
}

#hi h2 {
  text-align: center;
  color: white;
}

#hi h3 {
  text-align: center;
  color: white;
}

#hi {
  background-color: rgba(0, 0, 0, 0.9);
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  text-align: center;
}

＆＃13;

<div class="hi">
  <h1> basics </h1>
  <h2> Text </h2>
  <h3> Another text </h3>
  <h3>
    <img src="images/image1.png" alt="Image" height="42" width="42"> 
  </h3>
</div>

＆＃13;

＆＃13;

＆＃13;