javascript滑块箭头键和淡入淡出图像

Question

我设法获得了一个简单的图像滑块，这正是我想要的，我也在学习css网格。

我没能做到我想实现的两件事：

1. 使用键盘的箭头键来更改"大图像"，就像点击缩略图一样
2. 使主图像以短过渡渐变效果出现

这是我已经拥有的代码和javascript，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>