Створення динамічних елементів на веб сторінках
Вправа 2. Опрацювання події натиснення на кнопку (перегляд зображень)
Хід роботи
1. Створіть папку "Практична", в ній папку "Images"
2. Скачайте або намалюйте 9 зображень, дайте їм назви 1.jpg, 2.jpg, ... 9.jpg Перемістіть їх у папку "Images"
3. У папці "Практична" створіть файл photo.html, наберіть текст
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
<script type="text/javascript">
var photosCount = 9;
var currentPhotoIndex = 1;
function showNextPhoto() {
currentPhotoIndex++;
if(currentPhotoIndex>photosCount) {currentPhotoIndex=1;}
var elem = document.getElementById("currentPhoto");
elem.src = "images/" + currentPhotoIndex + ".jpg";
}
</script>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 align="center"> Найщасливіші миті життя </h1>
<img id="currentPhoto" height="420" width="540" src="images/1.jpg" />
<button onclick="showNextPhoto()">Next</button>
</body>
</html>
Коментарі
Дописати коментар