Untitled
unknown
plain_text
a year ago
2.2 kB
4
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Photo Album</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .album-container { text-align: center; } #photo { max-width: 100%; height: auto; display: block; margin: 20px auto; } .button-container { display: flex; justify-content: center; gap: 10px; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; } </style> </head> <body> <div class="album-container"> <div class="button-container"> <button id="prevButton" onclick="prevPhoto()">Back</button> <button id="nextButton" onclick="nextPhoto()">Next</button> </div> <img id="photo" src="photos/photo1.jpg" alt="Photo"> </div> <audio id="backgroundMusic" autoplay loop> <source src="music/background.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <script> const photos = [ 'photos/photo1.jpg', 'photos/photo2.jpg', 'photos/photo3.jpg', // Add more photo paths here ]; let currentPhotoIndex = 0; function updatePhoto() { document.getElementById('photo').src = photos[currentPhotoIndex]; } function nextPhoto() { currentPhotoIndex = (currentPhotoIndex + 1) % photos.length; updatePhoto(); } function prevPhoto() { currentPhotoIndex = (currentPhotoIndex - 1 + photos.length) % photos.length; updatePhoto(); } </script> </body> </html>
Editor is loading...
Leave a Comment