J'ai écrit moi-même trois carrousels. L'un est implémenté dans un JS indigène simple et n'a aucun effet d'animation. L'autre est implémentée en combinaison avec jQuery et est interrogée. Maintenant, je veux en faire un plus cool sur mon blog ou mon site Web personnel, et je peux afficher mes propres œuvres à ce moment-là. Après un certain temps, les achats à MOOC, j'ai trouvé qu'il y avait un cours de plug-in carrousel jQuery, ce qui était un peu cool, alors j'ai pensé à le résumer dans JS natif. Ce n'est qu'après l'avoir fait que c'était aussi facile que je le pensais. . . Ne parlons plus à ce sujet, expliquons le processus de mise en œuvre.
2. Effet
Parce que mon serveur n'a pas encore été installé. Il n'y a pas de démonstration en ligne (orz ...), donc je ne peux que mettre un rendu.
L'effet approximatif peut encore être vu à partir des photos, donc je ne dirai pas grand-chose. Si vous souhaitez voir l'effet de code réel, bienvenue dans mon code de téléchargement GitHub. N'oubliez pas de me donner une étoile dans mon projet GitHub ^ _ ^
Iii. Processus de mise en œuvre
Structure HTML
<div Data-Setting = '{"Width": 1000, "Height": 400, "Carrouselwidth": 750, "Carrousselheight": 400, "Scale": 0.9, "VerticalAlign": "Middle"}'> <div> </div> <ul> <li> <a href = "#"> <img src = "img / 1.jp" <li> <a href = "#"> <img src = "img / 2.jpg"> </a> </li> <li> <a href = "#"> <img src = "img / 2.jpg"> </a> </li> <li> <a href = "#"> <img src = "IMG / 3.jpg"> </a> </ li> <a href = "#"> <img src = "img / 4.jpg"> </a> </li> <li> <a href = "#"> <img src = "img / 5.jpg"> </a> </ul> <div> </ div> </ div>Cette structure est la même que la structure du code HTML des carrousels généraux. La légère différence est qu'il existe une propriété de réglage des données sur le principal carrousel div, qui contient certains paramètres d'effets de carrousel. La signification spécifique des paramètres sera expliquée plus tard.
Le code de la pièce CSS ne sera pas affiché. La chose la plus importante est de faire attention au positionnement absolu des éléments. Comme le montrent les rendus, la position et la taille de chaque image sont différentes, donc celles-ci sont contrôlées via JS, donc un positionnement absolu est requis. Concentrons-nous sur le processus de mise en œuvre de JS.
Processus de mise en œuvre JS
Parlons de quelques étapes clés de JS. Après avoir fait ces étapes, il ne devrait y avoir aucune difficulté.
① paramètres de Default
Puisqu'il s'agit d'un plug-in de package, il y aura certainement des valeurs par défaut pour les paramètres qui doivent être configurés. Dans ce plugin, les paramètres suivants sont principalement:
Largeur: 1000, // largeur de la zone de diapositive
Hauteur: 400, // la hauteur de la zone de diapositive
CarouselWidth: 700, // largeur de la première image de la diapositive
Carrouselheight: 400, // la hauteur de la première image de la diapositive
Échelle: 0,9, // Enregistrez la relation d'échelle, par exemple, la largeur et la hauteur de la deuxième image sont plus petites que celles de la première image lorsqu'elles sont affichées.
AutoPlay: true, // est-il joué automatiquement?
Timespan: 3000, // Intervalle de temps de jeu automatique
VerticalAlign: Alignement d'image 'Middle' //, il y a trois façons: supérieur / milieu / inférieur, la valeur par défaut est moyenne
②Capapuler l'objet
Parce qu'un site Web peut utiliser le même plug-in carrousel à plusieurs endroits, l'emballage est essentiel. Après avoir défini cet objet, si vous définissez une méthode d'initialisation pour l'objet, vous pouvez créer plusieurs objets. Il vous suffit de passer le même dom de toutes les classes. Donc, ma méthode d'initialisation est la suivante:
Carrousel.init = fonction (carrousels) {var _This = this; // Convertir Nodelist en Cals var de tableau = TOARRAY (Carrousels); <br> / * Parce que natif JS obtient toutes les classes, ce que vous obtenez est un nodeliste, qui est un tableau de classe. Si vous souhaitez utiliser une méthode de tableau, vous devez le convertir en un vrai tableau. Ici, c'est la méthode de conversion. * / Cals.ForEach (fonction (item, index, array) {new _This (item);}); }De cette façon, lorsque je suis sur Window.onload, j'appelle Carrousel.init (document.QuerySelectorAll ('. Carrousel-main')); De cette façon, je peux créer plusieurs carrousels!
③Initialiser les paramètres de position de la première trame
Étant donné que les paramètres pertinents de toutes les trames après la première trame sont définis en référence à la première trame, il est important de définir bien le premier cadre.
setValue: function () {this.carroussel.style.width = this.settings.width + 'px'; this.carrousel.style.height = this.settings.height + 'px'; / * Paramètres de bouton gauche et gauche, ici, la zone après les boutons gauche et droite est soustraite de la largeur du premier cadre. L'index z est plus élevé que toutes les images sauf la première trame, et les images sont simplement placées à gauche et à droite, donc la valeur de l'index z est la moitié du nombre d'images. * / var btnw = (this.settings.width-this.settings.carrousselwidth) / 2; this.prebtn.style.width = btnw + 'px'; this.prebtn.style.height = this.settings.height + 'px'; this.prebtn.style.zindex = math.ceil (this.carrousseletems.length / 2); this.nextbtn.style.width = btnw + 'px'; this.nextbtn.style.height = this.settings.height + 'px'; this.nextbtn.style.zindex = math.ceil (this.carrousseLitems.length / 2); // les paramètres liés à la première trame this.carrousselfir.style.top = this.setcarrousselalign (this.settings.carrousselheight) + 'px'; this.carrousselfir.style.width = this.settings.carrousselwidth + 'px'; this.carrousselfir.style.height = this.settings.carrousselheight + 'px'; this.carrousselfir.style.zindex = math.floor (this.carrousseletems.length / 2);},Ici, lorsque le nouvel objet est utilisé, accédez au nœud Dom pour obtenir les paramètres de mise en place des données, puis mettez à jour la configuration du paramètre par défaut. Il y a un endroit pour noter ici. Vous ne pouvez pas mettre à jour directement les paramètres par défaut en attribuant des valeurs lors de l'obtention des paramètres, car lorsque les utilisateurs configurent les paramètres, tous les paramètres peuvent ne pas être configurés une fois. Si la valeur est attribuée directement et que l'utilisateur est configuré, les paramètres seront perdus. Ici, j'ai écrit une méthode d'extension d'objet similaire à la méthode $ .extend dans jQuery pour mettre à jour les paramètres. Je ne listerai pas les détails, si vous êtes intéressé, vous pouvez le télécharger.
Paramètres d'emplacement d'image
L'image ici est en fait l'image, sauf que la première est divisée en deux images gauche et droite, et la position de l'image à gauche et celle à droite est différente, elle doit donc être configurée séparément:
// Définit la relation positionnelle de l'image sur la droite var droite-index = niveau; RightsLice.ForEach (fonction (élément, index, array) {droite-index--; var i = index; rw = rw * carrousselself.settings.scale; // l'image à droite est progressivement plus petite selon le rapport d'échelle rh = rh * carrousself.settings. Z-index à droite est plus petit, et le nombre d'images peut être progressivement diminué en utilisant le nombre général d'images item.style.width = rw + 'px'; La méthode de calcul ici est: Soustraire la première largeur de trame, diviser 2, puis diviser le nombre d'images sur l'élément gauche ou droit. item.style.top = carrousself.setcarrousselalign (rh) + 'px';});La méthode de réglage à gauche est similaire et plus simple, donc je n'entrerai pas dans les détails.
⑤ Ajustez la taille de la position de toutes les images pendant la rotation
Cette étape est très importante. Cliquez sur le bouton suivant sur le bouton droit est la rotation gauche, et cliquer sur le bouton précédent sur le bouton gauche est la rotation droite. Pour le moment, nous devons seulement considérer toutes les images comme un anneau, cliquer une fois, modifier la position et terminer la rotation. Plus précisément, lorsque la rotation gauche est tournée, faites les paramètres de la deuxième image égaux à la première image, la troisième image égale à la deuxième image ... et la dernière image égale à la première image. En tournant à droite, faites le paramètre de la première image égale à la deuxième image, le paramètre de la deuxième image égale à la troisième image ... et le paramètre de la dernière image égale à la première image.
Parlons de la rotation gauche ici
if (dir == 'Left') {toArray (this.carrousseLitems) .ForEach (fonction (item, index, array) {var pre; if (index == 0) {// juger s'il s'agit du premier pré = _This.carroussellat; // Enregistrer le premier pré-paramètre de var vers la dernière largeur = pré.offsetwidth; // obtenir le paramètre correspondant var pleine grandeur = pré. zIndex=pre.style.zIndex; var opa=pre.style.opacity; var top=pre.style.top; var left=pre.style.left; }else{ var width = tempWidth; var height = tempHeight; var zIndex = tempZIndex; var opa = tempOpacity; var top = tempTop; var left = tempLeft; } //Note here, because the second picture refers à la première image, et lorsqu'il est en train de changer, la première image est modifiée, donc les paramètres pertinents de la première image doivent être enregistrés. ITEMS.STYLE.Width = Width + 'PX'; function_this.rotateflag = true;});};}La rotation ici semblera rigide si vous n'utilisez pas trop d'animations. Mais le natif JS n'a pas de fonctions animées, ici j'ai moi-même écrit une fonction d'animation imitée. Le principe est d'obtenir la valeur de style originale du DOM et de le comparer avec la valeur nouvellement passée. Utilisez certaines méthodes pour définir une vitesse. Ma vitesse ici est de diviser la différence de 18. Cependant, définissez une minuterie et référez-vous à l'intervalle de temps dans le code source jQuery pour exécuter tous les 13 millisecondes. Ensuite, la minuterie est claire à chaque fois que la valeur de style d'origine est ajoutée à la valeur entrante. Pour plus de détails, veuillez consulter ici.
D'accord, les points clés sont presque les mêmes, et cela devrait être facile si vous comprenez ces processus!
4. Résumé et réflexion
Résumer:
Je pense personnellement que c'est un plugin relativement facile à comprendre. Ce serait assez simple de le faire en combinaison avec jQuery. Cependant, si vous écrivez à partir de l'original, vous vous sentez toujours un peu moins fluide. Il faut que les animations personnalisées ne soient pas aussi bonnes que les animations encapsulées par jQuery.
De plus, parce que les images doivent être divisées également des deux côtés des côtés gauche et droite, pour même des nombres d'images, la méthode utilisée ici est de cloner la première image, puis de l'ajouter à la fin et de former un nombre impair.
pense:
S'il y a un bug, cela signifie que je définis un drapeau RotateFlag pour déterminer s'il peut tourner en ce moment, ce qui est pour vous empêcher de suivre le clic rapide. Lorsque j'ai appuyé, j'ai réglé RotateFlag sur FALSE, puis je définis RotateFlag sur true après la fin de l'animation, mais il semble que l'effet ne soit pas évident. J'espère que les maîtres pertinents pourront me donner quelques conseils et que tout le monde progressera ensemble.
Ce qui précède est l'intégralité du contenu de cet article. Pour plus de contenu, veuillez vous référer à: Résumé des effets du carrousel d'image JavaScript. Merci pour votre lecture.