Я хочу сделать так, чтобы в каждый так сказать уровень можно было добавить слайдер, чтобы была не одна картинка, а несколько и их можно было бы просматривать, как слайдер, вот код:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="UTF-8">
</head>
<body>
<h1 align="center" id="out">Город</h1>
<div align="center"><img id = "images" src="Картинки/Минск.jpg" width="500px" height="250px"></div>
<div align="center">Место <input type="number" class="input"></div>
<div align="center"><button align="center">Результат</button></div>
</body>
<script src = "script.js"></script>
</html>
let fon = '#01c1c1';
document.body.style.background = fon;
var num = 0;
let img = [
"Картинки/Минск1.jpg",
"Картинки/Гродно.jpg",
"Картинки/Брест.jpg",
"Картинки/Гомель.jpg",
"Картинки/Витебск.jpg"
]
let button = document.querySelector('button');
button.onclick = function () {
//alert ("Hi");
let result;
let top = document.querySelector('.input');
top = +top.value;
switch (top) {
case 1:
result = "Минск";
document.getElementById('out').innerHTML = result;
images.src = img[0];
break;
case 2:
result = "Гродно";
document.getElementById('out').innerHTML = result;
images.src = img[1];
break;
case 3:
result = "Брест";
document.getElementById('out').innerHTML = result;
images.src = img[2];
break;
case 4:
result = "Гомель";
document.getElementById('out').innerHTML = result;
images.src = img[3];
break;
case 5:
result = "Витебск";
document.getElementById('out').innerHTML = result;
images.src = img[4];
break;
}
}
