Untitled
unknown
plain_text
2 years ago
1.7 kB
9
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