javascript滑块箭头键和淡入图像

Question

I managed to get a simple image slider exactly how I wanted it, styling it with css grids that I'm learning too.

I didn't manage to do 2 things I'd like to achieve:

1. Use arrow keys of the keyboard to change the "big image" as one can already do by clicking on thumbnails.
2. make the main image appear with a short transition fade effect.

Here is the code and javacript I already have, css is on another file:

 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>