diaporama avec numéros de page javascript

J'ai créé un diaporama. Je veux ajouter une description avec les numéros de page. J'essayais d'ajouter la fonction sliderText() pour obtenir le résultat - "Image 1 sur 7" etc.diaporama avec numéros de page javascript

Je ne sais pas ce qui ne va pas ici. Quelqu'un peut-il me donner des indices?

Nous vous remercions à l'avance, Megi

var img_index = 0; 
 
var imgs = [ 
 
    "assets/1.jpg", 
 
    "assets/2.jpg", 
 
    "assets/3.jpg", 
 
    "assets/4.jpg", 
 
    "assets/5.jpg", 
 
    "assets/6.jpg", 
 
    "assets/7.jpg" 
 

 
]; 
 

 

 
function findNextImage(isPrev) { 
 
    switch (true) { 
 
    case !!(isPrev && imgs[img_index + 1]): 
 
     img_index += 1 
 
     return imgs[img_index] 
 

 
    case !!imgs[img_index + 1]: 
 
     img_index += 1 
 
     return imgs[img_index] 
 

 
    default: 
 
     img_index = 0 
 
     return imgs[img_index] 
 

 
    } 
 

 
    sliderText() 
 
} 
 

 

 

 
function checkKey(event) { 
 
    if (event.keyCode == '39') { 
 
    document.getElementById("images").src = findNextImage(); 
 
    
 
    } else if (event.keyCode == '37') { 
 
    document.getElementById("images").src = findNextImage(true); 
 
    } 
 

 
} 
 

 
document.onkeydown = checkKey; 
 

 

 

 

 

 
function sliderText() { 
 
    var text = document.getElementsByClassName("slideshow_text"); 
 
    var imageNumber = img_index + 1; 
 
    text.innerHTML = "image " + imageNumber + " of " + imgs.length; 
 

 
}

<!DOCTYPE html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>test</title> 
 
</head> 
 
<h1 class="slideshow_text">Image 1 of 7</h1> 
 
<img id="images" src="assets/1.jpg" /> 
 

 

 
<body> 
 

 
</body> 
 
<script src="test.js"></script> 
 

 
</html>

Source

2017-07-15 Magdalena Dering

Quelques modifications pour améliorer le code qualité

j'ai enlevé findNextImage qui n'a pas été une fonction pure et introduit findNextImageIndex à la place: findNextImageIndex n'accède ni ne modifie aucune valeur externe variables et est donc plus facile à lire. sliderText prend imgIndex en tant qu'argument afin que vous puissiez facilement voir les paramètres dont il a besoin pour définir le texte.

suggestions D'autres

Envisager de déplacer les valeurs prédéfinies Image 1 of 7 et "assets/1.jpg" de HTML JavaScript ainsi. Initialisez le curseur avec "assets/1.jpg" pris dans la matrice et appelez sliderText(state.imgIndex); une fois initialement.

Veuillez noter que j'ai déplacé le diaporama HTML à l'intérieur du <body> pour le rendre valide au format HTML.

Code modifié

var state = { 
 
    imgIndex: 0 
 
}; 
 
var imgs = [ 
 
    "assets/1.jpg", 
 
    "assets/2.jpg", 
 
    "assets/3.jpg", 
 
    "assets/4.jpg", 
 
    "assets/5.jpg", 
 
    "assets/6.jpg", 
 
    "assets/7.jpg" 
 
]; 
 

 
function findNextImageIndex(imgIndex, isPrev) { 
 
    if(isPrev) { 
 
    if(imgIndex <= 0) { 
 
     return imgs.length - 1; 
 
    } else { 
 
     return imgIndex - 1; 
 
    } 
 
    } else { 
 
    if(imgIndex >= imgs.length - 1) { 
 
     return 0; 
 
    } else { 
 
     return imgIndex + 1; 
 
    } 
 
    } 
 
} 
 

 
function sliderText(imgIndex) { 
 
    var text = document.getElementsByClassName("slideshow_text")[0]; 
 
    var imageNumber = imgIndex + 1; 
 
    text.innerHTML = "image " + imageNumber + " of " + imgs.length; 
 
} 
 

 
function goToNextImage(isPrev) { 
 
    state.imgIndex = findNextImageIndex(state.imgIndex, isPrev); 
 
    document.getElementById("images").src = imgs[state.imgIndex]; 
 
    sliderText(state.imgIndex); 
 
} 
 

 
function checkKey(event) { 
 
    switch(event.keyCode) { 
 
    case 37: goToNextImage(true); break; 
 
    case 39: goToNextImage(false); break; 
 
    } 
 
} 
 

 
document.onkeydown = checkKey;

<!DOCTYPE html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>test</title> 
 
</head> 
 

 
<body> 
 
    <h1 class="slideshow_text">Image 1 of 7</h1> 
 
    <img id="images" src="assets/1.jpg" /> 
 
    <script src="test.js"></script> 
 
</body> 
 

 
</html>

Source

2017-07-15 16:43:07 ideaboxer

diaporama avec numéros de page javascript

Répondre

Questions connexes