Untitled
unknown
plain_text
a year ago
1.7 kB
5
Indexable
// Hämtar referens till bild-elementet const imageElement = document.querySelector('.post-image img'); // En array med bildkällor const imageSources = [ 'images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg', 'images/image4.jpg', 'images/image5.jpg', ]; let currentImageIndex = 0; // Index för den aktuella bilden // Hämtar referenser till pilarna const arrowLeft = document.getElementById('arrow-left'); const arrowRight = document.getElementById('arrow-right'); // Lägger till en händelselyssnare för hover-effekt på pilarna arrowLeft.addEventListener('mouseover', function() { arrowLeft.style.cursor = 'pointer'; arrowLeft.style.borderRightColor = 'pink'; }); arrowLeft.addEventListener('mouseout', function() { arrowLeft.style.borderRightColor = 'palevioletred'; }); arrowRight.addEventListener('mouseover', function() { arrowRight.style.cursor = 'pointer'; arrowRight.style.borderLeftColor = 'pink'; }); arrowRight.addEventListener('mouseout', function() { arrowRight.style.borderLeftColor = 'palevioletred'; }); // Lägger till en händelselyssnare för vänsterpilen arrowLeft.addEventListener('click', function () { currentImageIndex = (currentImageIndex - 1 + imageSources.length) % imageSources.length; updateImage(); }); // Lägger till en händelselyssnare för högerpilen arrowRight.addEventListener('click', function () { currentImageIndex = (currentImageIndex + 1) % imageSources.length; updateImage(); }); // Funktion för att uppdatera bildkällan function updateImage() { const newImageSource = imageSources[currentImageIndex]; imageElement.src = newImageSource; }
Editor is loading...
Leave a Comment