HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Image Slideshow</title> </head> <body> <div class="slideshow-container"> <div class="mySlides"> <img src="image1.jpg" class="slideshow-img"> </div> <div class="mySlides"> <img src="image2.jpg" class="slideshow-img"> </div> <div class="mySlides"> <img src="image3.jpg" class="slideshow-img"> </div> <div class="mySlides"> <img src="image4.jpg" class="slideshow-img"> </div> </div> </body> </html>
CSS:
<style> .slideshow-container { max-width: 600px; position: relative; margin: auto; } .mySlides { display: none; } .slideshow-img { width: 100%; height: auto; } </style>
JavaScript:
<script> let slideIndex = 0; showSlides(); function showSlides() { let i; let slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } slides[slideIndex - 1].style.display = "block"; setTimeout(showSlides, 2000); // Change image every 2 seconds } </script>
Try to answer about this code:
What does the JavaScript function showSlides() do in this code?
Stops the image slideshow
Cycles through the images to create a slideshow
Displays a loading animation for images
Controls the navigation buttons for the slideshow
Which HTML element is responsible for containing the individual images in the slideshow?
<img class="slideshow-img">
<div class="mySlides">
<div class="slideshow-container">
<body>
What CSS property controls the visibility of the images in the slideshow?
display: block;
display: none;
visibility: hidden;
opacity: 0;
How often does the slideshow transition to the next image by default?
Every 1 second
Every 2 seconds
Every 3 seconds
Every 5 seconds