javascript滑块箭头键和淡入图像

Question

我设法按照我想要的方式获得了一个简单的图像滑块，并使用我也在学习的CSS网格对其进行了样式设置。

我没有想做两件事：

1. 使用键盘上的箭头键来更改“大图像”，就像单击缩略图一样。
2. 使主图像显示时具有短暂的过渡淡入淡出效果。

这是我已经拥有的代码和javacript，css在另一个文件中：

var lastImg = 1; //Set initial thumbnail and preview
document.getElementById(0).src = document.getElementById(lastImg).src;
document.getElementById(lastImg).className = "thumb selected";

function preview(img) {
  document.getElementById(lastImg).className = "thumb normal";
  img.className = "thumb selected";
  document.getElementById(0).src = img.src;
  lastImg = img.id
}

html,
body {
  height: 100vh;
}

body {
  padding: 0;
  margin: 0;
}

.container {
  height: 100vh;
  display: grid;
  grid-gap: 6px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

.nom {
  display: grid;
  grid-column: 3/8;
  grid-row: 1;
  color: #f9423ab5;
  font-family: 'Montserrat';
  font-size: 3.2vw;
  align-self: center;
  animation: couleur 8s;
}

a {
  display: grid;
  align-items: center;
  color: black;
  text-decoration: none;
  font-family: helvetica;
  font-size: 1.4vw;
  transform: rotate(-40deg);
  letter-spacing: 0.1rem;
}

.accueil {
  display: grid;
  grid-column: 10;
  grid-row: 1;
}

.contact {
  display: grid;
  grid-column: 11;
  grid-row: 1;
}

a:hover {
  text-decoration: none;
  color: coral;
}

.bigimage {
  width: 61vw;
  grid-column: 3/11;
  grid-row: 2/5;
  margin-top: 16px;
}

.thumb {
  width: 3vw;
  height: 2vw;
  margin-left: 18px;
  margin-bottom: 15px;
  align-self: center;
}

.thumb:hover {
  cursor: pointer;
  opacity: 0.1;
}

.thumbnails {
  grid-column: 1/3;
  grid-row: 2/5;
  margin-top: 16px;
}

<img id="0" class="preview normal bigimage" />

<div class="thumbnails">
  <img id="1" class="thumb normal" src="https://via.placeholder.com/140x100?text=image1" alt="image1" onclick="preview(this)" />
  <img id="2" class="thumb normal" src="https://via.placeholder.com/140x100?text=image2" alt="image2" onclick="preview(this)" />
  <img id="3" class="thumb normal" src="https://via.placeholder.com/140x100?text=image3" alt="image3" onclick="preview(this)" />


</div>

Answer 1

var lastImg = 'image1'; //Set initial thumbnail and preview
document.getElementById('image0').src = document.getElementById(lastImg).src;
document.getElementById(lastImg).className = "thumb selected";

function preview(img) {
  document.getElementById(lastImg).className = "thumb normal";
  img.className = "thumb selected";
  document.getElementById('image0').src = img.src;
  lastImg = img.id;
}

function previewOnKey(e) {
    /* left key */
    if (e.keyCode == 37) {
        var previousImg = document.getElementById(lastImg).previousElementSibling;
        if (previousImg) {
            preview(previousImg);
        }
    }

    /* right key */
    if (e.keyCode == 39) {
        var nextImg = document.getElementById(lastImg).nextElementSibling;
        if (nextImg) {
            preview(nextImg);
        }
    }
}

document.onkeydown = previewOnKey;

<img id="image0" class="preview normal bigimage" />

<div class="thumbnails">
  <img id="image1" class="thumb normal" src="https://placekitten.com/g/150/80" alt="image1" onclick="preview(this)"/>
  <img id="image2" class="thumb normal" src="https://placekitten.com/g/151/80" alt="image2" onclick="preview(this)" />
  <img id="image3" class="thumb normal" src="https://placekitten.com/g/152/80" alt="image3" onclick="preview(this)" />
 
</div>