Les exemples de cet article partagent avec vous l'effet de JS pour réaliser une commutation d'image pour votre référence. Le contenu spécifique est le suivant
Utilisez JS pour réaliser l'effet de cliquer sur les boutons et de changer d'images:
<div id = "box"> <div id = "img_box"> <img src = "../ brut / b1.jpg"> <img src = "../ brut / b2.jpg"> <img src = "../ brut / b3.jpg"> <img src = "../ brut / b4.jpg"> </v> id = "droite"> </div> </div>
Structure: Utilisez une largeur et une hauteur fixe pour faire du récipient le plus extérieur, réglez le débordement sur Hidden,
Ensuite, la couche intérieure IMG_BOX définit la largeur à quatre fois la largeur de la boîte et la hauteur est la même. C'est-à-dire que l'IMG_BOX contient quatre IMG, mais un seul est visible. Les deux divs, à gauche et à droite en dessous, agissent comme des boutons pour réaliser des clics pour changer d'images. La commutation d'images signifie modifier l'attribut gauche d'IMG_Box, donc IMG_BOX doit définir la position sur Absolute. Pour plus de commodité, la position de la boîte est définie sur la relation, donc img_box est positionné par rapport à la boîte. Quatre images définissent le flotteur à gauche, avec la même largeur et la même hauteur que la boîte.
Code CSS:
* {margin: 0; rembourrage: 0;}. Box {largeur: 800px; hauteur: 400px; marge: 20px automatique; Position: relative; Overflow: Hidden;}. img_box {hauteur: 400px; Largeur: 3200px; Position: absolue; -Moz-transition: 0,5 s; -Webkit-transition: 0,5s;} img {largeur: 800px; hauteur: 400px; float: gauche;}. Switch {width: 200px; hauteur: 100%; Position: Absolute;} # Left {Left: 0px; En haut: 0px; Contexte: -moz-linéaire-gradient (gauche, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0)); Contexte: -Webkit-linear-gradient (gauche, rgba (84, 84, 84, 0,50), rgba (20%, 20%, 20%, 0));} # droit {droit: 0px; En haut: 0px; Contexte: -moz-linéaire-gradient (gauche, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0,5)); Contexte: -webkit-linear-gradient (à gauche, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0,5));} # gauche: hover {Background: -moz-linear-gradient (gauche, rgba (0, 0, 0,0.5), Rgba (20%, 20% Contexte: -moz-linear-gradient (à gauche, RGBA (0, 0, 0,0,5), RGBA (20%, 20%, 20%, 0));} # Droite: Hover {Background: -moz-linear-Gradient (gauche, RGBA (20%, 20%, 20%, 0), RGBA (0, 0, 0,0.5)); Contexte: -Webkit-linear-gradient (gauche, RGBA (20%, 20%, 20%, 0), RGBA (0, 0, 0,0,5));}À gauche et à droite, utilisez la couleur d'arrière-plan et les propriétés du gradient de transparence, seuls le navigateur Firefox et le navigateur WebKit sont ajoutés. De plus, certains navigateurs IE sont IE et les deux cœurs Webkit tels que 360 Secure Browser
Contexte: -moz-linéaire-gradient (gauche, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0));
Contexte: -Webkit-linear-gradient (gauche, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0));
Afin d'obtenir des transitions en douceur pendant la commutation, la propriété de transition est ajoutée:
-Moz-transition: 0,5 s;
-Webkit-transition: 0,5 s;
Code js:
var box; var count = 1; window.onload = function () {box = document.getElementById ("img_box"); var left = document.getElementById ("Left"); var droit = document.getElementById ("droite"); Left.AdDeventListener ("Click", _ Left); right.addeventListener ("cliquez", _ à droite); document.body.addeventListener ("MouseOver", Demo);} fonction _Right () {var dis = 0; if (count <4) {dis = count * 800; } else {dis = 0; count = 0; } box.style.left = "-" + dis + "px"; Count + = 1;} fonction _left (événement) {var dis = 0; if (count> 1) {dis = (2-comptage) * 800; } else {dis = -3 * 800; Count = 5; } box.style.left = dis + "px"; count- = 1;}Utilisez le nombre de variables globales pour enregistrer l'image actuellement affichée. Lorsque vous cliquez sur le bouton basculer, calculez quelle image doit être affichée en fonction du nombre, puis calculez et définissez l'attribut gauche d'IMG_BOX.
Ce qui précède est le code d'implémentation des effets de commutation d'image par JS qui vous est introduit. J'espère que cela peut vous aider à réaliser des effets de commutation d'image.