Клавиши со стрелками слайдера javascript и исчезновение изображения
Мне удалось получить простой слайдер изображений именно так, как я хотел, стилизовав его с помощью CSS-сеток, которые я тоже изучаю.
Мне не удалось сделать 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>Также не рекомендую использовать числовые идентификаторы. Вместо этого используйте, например, от "image0" до "image15".
Спасибо mplungjan за помощь в размещении моего вопроса здесь, ;-)!
Пожалуйста, добавьте изображения из сети (заполнитель) и обновите фрагмент с помощью CSS
Простите, но какой смысл добавлять изображения сюда с placeholder.com?
Чтобы создать минимальный воспроизводимый пример - чтобы нам не приходилось гадать, работает ваш слайдер или нет
Я здесь новичок, и я даже не могу найти, как изменить свой фрагмент, чтобы добавить мой CSS, и я не знаю, как использовать placeholder.com. Я не профессиональный разработчик или компьютерщик, мне просто интересно создавать что-то в Интернете так, как я хочу. Мне просто нужна была помощь с подробностями о функциях javascript. В любом случае, спасибо за вашу помощь.
Нажмите редактировать - прокрутите вниз, нажмите отредактируйте приведенный выше фрагмент, откройте другую вкладку, перейдите на placeholder.com, используйте измеритель для создания изображений подходящего размера. Вернитесь и измените URL-адреса в src https://via.placeholder.com/140x100?text=image1, например, и добавьте недостающий CSS во фрейм CSS.
Спасибо за вашу помощь, "mplungjan", я сделал это и стер некоторые изображения для большей ясности.
Но вы не обновили правильный фрагмент
В любом случае у тебя есть ответ
Сейчас обновил вашу исправленную версию, ;-). У меня есть большая часть ответа, и это круто! Я до сих пор не знаю, как заставить изображения немного блекнуть, когда основное изображение изменяется при нажатии на миниатюру или нажатии клавиш со стрелками.
Это может быть новый вопрос. Искать переход по первому щелчку
Спасибо, я проверю с этими словами.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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>Большое спасибо "IIona K" за время, потраченное на написание и отправку этого кода, он работает нормально, и теперь я также могу перемещаться между изображениями с помощью клавиш со стрелками. :-))
Я сделал вам отрывок. Вы можете добавлять изображения с lorempixel или placeholder.com - вы используете слово «эффект затухания перехода», почему бы не погуглить?