L'auteur a déjà publié un script
carrousel , qui utilise également uniquement CSS et Javascript. Jetons maintenant un œil au script du curseur. Il diffère du carrousel en ce sens qu'un seul élément est visible à la fois, et non plusieurs, et que les éléments ne défilent pas, mais sont lentement remplacés les uns par les autres. Et bien plus. Dans ce curseur, seules les images (diapositives) sont utilisées comme éléments, c'est pourquoi il est appelé un simple curseur d'image.
La navigation s'effectue par les flèches «Elément suivant» ou «Elément précédent» et les points indicateurs. Les flèches et les points peuvent être désactivés dans les paramètres du script. Les éléments peuvent être affichés avec un arrêt sur le premier et le dernier élément ou dans un cycle lorsque le dernier élément est à nouveau suivi par le premier. Vous pouvez activer la visualisation automatique (défilement) des éléments, la durée de visualisation (l'intervalle entre les commutations) est réglable. Lorsque vous passez la souris sur un élément, le défilement s'arrête.
Le curseur s'ajuste automatiquement à n'importe quelle largeur d'écran de n'importe quel appareil. Vous pouvez le vérifier en déplaçant à gauche ou à droite l'un des côtés du navigateur.
HTML - le code du curseur est standard, à l'exception d'un: un écran est placé devant les images, qui est une image blanche simple. Toutes les images et l'écran doivent être de la même taille. Le nombre d'images est arbitraire.
<div class="sim-slider"> <ul class="sim-slider-list"> <li><img src="screen.gif" alt="screen"></li> <li class="sim-slider-element"><img src="img1.jpg" alt="1"></li> <li class="sim-slider-element"><img src="img2.jpg" alt="2"></li> … <li class="sim-slider-element"><img src="imgN.jpg" alt="N"></li> </ul> <div class="sim-slider-arrow-left"></div> <div class="sim-slider-arrow-right"></div> <div class="sim-slider-dots"></div> </div>
Les balises <ul> <li> ont été utilisées comme conteneurs, mais vous pouvez utiliser soit <div> <div> ou <div> <p>. Les flèches et les points indicateurs sont positionnés de manière absolue dans les conteneurs respectifs. Pour les flèches, des motifs sous forme de crochets triangulaires sont utilisés, que vous pouvez, si vous le souhaitez, remplacer par vos propres motifs. Les points sont générés par le programme, le nombre de points est égal au nombre d'images.
Toutes les images sont placées «dans une pile», l'une au-dessus de l'autre, un positionnement absolu dans le coin supérieur gauche du conteneur englobant. L'écran empêche l'effondrement du récipient extérieur. Toutes les images reçoivent la propriété CSS opacity: 0, à l'exception du premier élément auquel le programme d'initialisation attribue l'opacity: 1, la rendant ainsi visible.
Le défilement à travers les éléments est effectué en changeant en douceur l'opacité de 1 à 0 pour l'élément visible et de 0 à 1 pour l'élément invisible suivant. Ainsi, l'élément visible devient invisible et l'invisible visible. Le lissage de la transition crée une propriété de transition d'une durée de 1 s et une fonction de transition facilitée.
CSS img { width: 100%; !important; } .sim-slider { position: relative; } .sim-slider-list { margin: 0; padding: 0; list-style-type: none; position: relative; } .sim-slider-element { width: 100%; transition: opacity 1s ease-in; opacity: 0; position: absolute; z-index: 2; left: 0; top: 0; display: block; } div.sim-slider-arrow-left, div.sim-slider-arrow-right { width: 22px; height: 40px; position: absolute; cursor: pointer; opacity: 0.6; z-index: 4; } div.sim-slider-arrow-left { left: 10px; top: 40%; display: block; background: url("sim-arrow-left.png") no-repeat; } div.sim-slider-arrow-right { right: 10px; top: 40%; display: block; background: url("sim-arrow-right.png") no-repeat; } div.sim-slider-arrow-left:hover { opacity: 1.0; } div.sim-slider-arrow-right:hover { opacity: 1.0; } div.sim-slider-dots { width: 100%; height: auto; position: absolute; left: 0; bottom: 0; z-index: 3; text-align: center; } span.sim-dot { width: 10px; height: 10px; margin: 5px 7px; padding: 0; display: inline-block; background-color: #BBB; border-radius: 5px; cursor: pointer; }
Pour que le curseur s'adapte à n'importe quelle largeur d'écran, pour les images, vous devez spécifier la largeur de la propriété CSS: 100%. Pour tous les conteneurs de blocs (div, ul, li, etc.) également largeur: 100% ou, si vous avez besoin de largeur en unités numériques, alors uniquement largeur max ou largeur min.
Les styles, comme d'habitude, sont inclus dans l'en-tête. Le script peut être connecté lors de l'événement onload ou à la fin du balisage HTML. Le fichier de script du curseur peut ressembler à ceci:
<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Simple slider</title> <link rel="stylesheet" type="text/css" href="sim-slider-styles.css"> </head> <body> … <div class="sim-slider"> … </div> … <footer> … </footer> <script src="sim-slider.js"></script> <script>new Sim()</script> </body> </html>
Le curseur est appelé par le nom de la classe sim-slider ou par identifiant. Dans le second cas, vous pouvez placer plusieurs curseurs sur une seule page.
<div class="sim-slider" id="first"> … <div class="sim-slider" id="second"> … <script>new Sim("first"); new Sim("second");</script>
Javascript function Sim(sldrId) { let id = document.getElementById(sldrId); if(id) { this.sldrRoot = id } else { this.sldrRoot = document.querySelector('.sim-slider') };
Toutes les images proviennent de sources ouvertes.Merci de votre attention!