67 lines
2.5 KiB
JavaScript
67 lines
2.5 KiB
JavaScript
// A vous de jouer !
|
|
|
|
// Identifie les deux élements de la liste fixe / portable
|
|
const desktopLi = document.getElementById("fixe");
|
|
const laptopLi = document.getElementById("portable");
|
|
const computerImg = document.getElementById("img-pc");
|
|
|
|
// Ajouter d'un observateur d'évènement sur ces éléments, faisant appel à la fonction définie ci-dessous
|
|
desktopLi.addEventListener("click", () => { selectComputerPicture("fixe"); });
|
|
laptopLi.addEventListener("click", () => { selectComputerPicture("portable"); });
|
|
|
|
// Ajout d'observateurs d'évènements pour le passage de la souris sur l'image
|
|
computerImg.addEventListener("mouseenter", () => {
|
|
if (desktopLi.classList.contains("selected")) {
|
|
selectComputerPicture("portable");
|
|
} else {
|
|
selectComputerPicture("fixe");
|
|
}
|
|
})
|
|
|
|
computerImg.addEventListener("mouseleave", () => {
|
|
if (desktopLi.classList.contains("selected")) {
|
|
selectComputerPicture("portable");
|
|
} else {
|
|
selectComputerPicture("fixe");
|
|
}
|
|
})
|
|
|
|
|
|
// Fonction modifiant l'application de la classe "selected" à un élément, à compléter
|
|
function selectComputerPicture(type) {
|
|
if (type === "fixe") {
|
|
console.log("fixe")
|
|
desktopLi.classList.add("selected");
|
|
laptopLi.classList.remove("selected");
|
|
computerImg.src = "img/ordinateur.png";
|
|
} else if (type === "portable") {
|
|
console.log("portable")
|
|
laptopLi.classList.add("selected");
|
|
desktopLi.classList.remove("selected");
|
|
computerImg.src = "img/portable.png";
|
|
}
|
|
}
|
|
|
|
// Tableau contenant les photos à faire défiler
|
|
let photos = ["img/clavier.png", "img/souris.png", "img/switch.png", "img/routeur.png"];
|
|
let currentPhoto = 0;
|
|
const photo = document.getElementById("img-peripherique");
|
|
|
|
//fonction modifiant la photo en décallant dans le tableau de la valeur "modifier" (positive ou négative)
|
|
function changePhotoIndex(modifier) {
|
|
currentPhoto += modifier;
|
|
if (currentPhoto > photos.length -1) {
|
|
currentPhoto = 0;
|
|
}
|
|
if (currentPhoto < 0) {
|
|
currentPhoto = photos.length -1;
|
|
}
|
|
photo.src = photos[currentPhoto];
|
|
}
|
|
|
|
// Définition des boutons et mise en place d'observateur d'évènements utilisant la fonction
|
|
const nextButton = document.getElementById("btn-suivant");
|
|
const prevButton = document.getElementById("btn-precedent");
|
|
|
|
nextButton.addEventListener("click", () => {changePhotoIndex(1);});
|
|
prevButton.addEventListener("click", () => {changePhotoIndex(-1);}); |