Dans l'équipe, on m'a demandé soudainement comment mettre en œuvre des images de carrousel. Je suis sur le terrain frontal depuis plus d'un an, mais je ne l'ai pas écrit moi-même depuis longtemps. J'ai toujours utilisé un plug-in pour l'écrire dans Daniu. Aujourd'hui, j'écrirai un tutoriel simple adapté aux débutants à apprendre. Bien sûr, il existe de nombreux principes de mise en œuvre et modèles de conception des diagrammes de carrousel. Ce dont je parle ici, c'est de les implémenter en utilisant la programmation fonctionnelle axée sur le processus. Par rapport aux modèles de conception orientés objet, le code apparaît inévitablement gonflé et redondant. Mais le manque d'abstraction orienté objet convient très bien aux novices pour comprendre et apprendre. Les étudiants qui sont déjà en chauve-souris espèrent moins gicler. Vous pouvez également donner plus de suggestions.
Le principe du diagramme du carrousel:
Une série d'images de tailles égales est carrelée, en utilisant la disposition CSS pour afficher une seule image, et les autres sont cachés. La lecture automatique est obtenue en calculant le décalage à l'aide de la minuterie ou en changeant d'images en cliquant manuellement sur les événements.
Disposition HTML
Tout d'abord, le conteneur des conteneurs parent stocke tous les contenus et la liste des conteneurs enfants contient des images. Les boutons de sous-container stockent les points des boutons.
<div id = "Container"> <div id = "list" style = "Left: -600px;"> <img src = "img / 5.jpg" /> <img src = "img / 1.jpg" /> <img src = "img / 2.jpg" /> <img src = "img / 2.jpg" /> <img src = "img / 3.jpg" /> <img src = "img / 4.jpg" /> <img src = "img / 5.jpg" /> <img src = "img / 1.jpg" /> </ div> <div id = "buttons"> <span index = "1"> </ span> <span index = "2"> </ span> <pan index = "3"> </ spander index = "3"> </ span> <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "javascript:;" id = "prev"> << / a> <a href = "javascript:;" id = "next" >> </a> </ div>
Optimiser, défilement transparent.
Lorsque vous passez de la dernière image à la première image, il y a un grand écart et utilisez deux images auxiliaires pour combler cet écart.
Voici un défilement transparent, regardez directement le code, copiez la dernière image avant de placer la première image et copiez la première image derrière la dernière image. Et, cachez l'image auxiliaire de première image (en fait la cinquième image réellement affichée, donc set style = "Left: -600px;")
Modification CSS
1. Comprendre le modèle de boîte, le flux de documents et les problèmes de positionnement absolu.
2. Faites attention au débordement: caché de la liste; Affichez uniquement une image de la fenêtre et masquez les côtés gauche et droit.
3. Assurez-vous que chaque calque de portée dans les boutons est surmontée et la définissez sur le haut. (Z-Index: 999)
* {margin: 0; padding: 0; text-decoration: non;} body {padding: 20px;} # conteneur {width: 600px; height: 400px; border: 3px solide # 333; overflow: Hidden; Position: relative;} # list {width: 4200px; # # # # list img; position; position: absolue; {Largeur: 600px; hauteur: 400px; float: gauche;} # boutons {position: absolu; hauteur: 10px; largeur: 100px; z-index: 2; en bas: 20px; gauche: 250px;} # boutons span {cursor: pointeur; float: gauche; frontière: 1px solide #fff; width: 10px; height: 10px; # 333; marge-droite: 5px;} # boutons .On {background: ORangered;}. Arrow {Cursor: Pointer; Affichage: Aucun; Line-Height: 39px; Text-Align: Center; Font-Size: Position: Font-Weight: Bold; Width; 180px; fond-couleur: rgba (0, 0, 0, .3); couleur: #fff;}. Arrow: hover {background-Color: rgba (0, 0, 0, .7);} # Container: hover .arrow {display: Block;} # prev {Left: 20px;} # suivante {droit: 20px;Js
Tout d'abord, nous réalisons d'abord l'effet de cliquer manuellement sur les flèches gauche et droite pour changer l'image:
window.onLoad = function () {var list = document.getElementById ('list'); var prev = document.getElementById ('prev'); var next = document.getElementyid ('suivant'); fonction animate (offset) {// ce qui est obtenu est style.left, qui est la distance pour obtenir une chaîne à gauche, donc la première image, le style.Left est toute négatif, // à être arrondis avec parseInt () pour le convertir en nombre. var newleft = parseInt (list.style.left) + offset; list.style.left = newleft + 'px';} prev.OnClick = function () {animate (600);} next.onclick = function () {animate (-600);}}Après l'exécution, nous constaterons que si vous continuez à cliquer sur la flèche droite, il y aura un blanc et vous ne pouvez pas revenir à la première image. Cliquez sur la flèche gauche pour revenir à la première image.
En utilisant Google Chrome F12, la raison en est que nous utilisons le décalage à gauche pour obtenir l'image. Lorsque nous voyons que la valeur de gauche est inférieure à 3600, il y aura un blanc s'il n'y a pas de 8e image, nous devons donc porter un jugement sur le décalage ici.
Ajoutez ce paragraphe à la fonction animée:
if (newLeft <-3000) {list.style.left = -600 + 'px';} if (newleft> -600) {list.style.left = -3000 + 'px';}Ok, exécutez-le, pas de problème. Les photos de carrousel, comme son nom l'indique, sont des photos que vous pouvez déplacer. Pour le moment, nous devons utiliser le minuteur d'objet intégré du navigateur.
Pour les minuteries, il est nécessaire d'expliquer la différence entre setInterval () et setTimeout. En termes simples, setInterval () est exécuté plusieurs fois et setTimeout () n'est exécuté qu'une seule fois.
Pour une utilisation plus spécifique, vous pouvez cliquer sur le lien pour afficher la différence: Window.SetInterval Window.SetTimeout.
Ici, nous utilisons setInterval () car notre image doit être une boucle de défilement. Insérer ci-dessous
var timer; fonction play () {timer = setInterval (function () {prev.OnClick ()}, 1500)} play ();Courez, OK!
Cependant, lorsque nous voulons regarder attentivement une certaine image, nous devons arrêter l'image et nous pouvons simplement effacer la minuterie. Cette méthode est utilisée ici.
Ici, nous devons opérer sur son DOM et devons obtenir toute la zone de la carte du carrousel;
var conteneur = document.getElementById ('Container'); fonction stop () {ClearInterval (Timer);} contener.onMouseOver = stop; contener.onmouseout = play;Mais ici, une photo de carrousel a été essentiellement terminée, et certains étudiants demanderont, donc c'est si simple. Avez-vous vu la rangée de petits points sous l'image? Je vous ai ajouté des fonctionnalités.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Voici la version mise à niveau:
var boutons = document.getElementById ('Buttons'). GetElementsByTagName ('Span'); var index = 1; Function ButtonsShow () {// Le style précédent doit être effacé pour (var i = 0; i <Buttons.Length; i ++) {if (boutons [i] .classname == 'on') {Buttons [i]. Le tableau commence à partir de 0, donc l'index a besoin de -1buttons [index - 1] .classname = 'on';} prev.OnClick = function () {index - = 1; if (index <1) {index = 5;} ButtonsShow (); animate (600);} net. Nous n'avons que 5 petits points, nous devons donc faire un index de jugement + = 1; if (index> 5) {index = 1;} ButtonsShow (); animate (-600);}Cela semble beaucoup plus normal maintenant, mais nous voulons cliquer sur l'un des petits points à tout moment avec la souris et passer à l'image correspondante. Le même principe est que nous devons toujours trouver l'image correspondante à travers le décalage.
pour (var i = 0; i <Buttons.length; i ++) {Buttons [i] .OnClick = function () {// Optimiser, cliquez sur le point actuel dans l'image actuelle et n'exécutez pas le code suivant. if (this.classname == "on") {return;} / * offset get: Ici vous obtenez la position où la souris se déplace vers le point, utilisez ce parseInt (this.getAttribute ('index')); var offset = 600 * (clickindex - index); animate (offset); // stockage la position après le clic de la souris et utilisez-le pour afficher les points comme index normal = clickindex; ButtonsShow ();}}Tout le monde, vous avez peut-être découvert que cette image de carrousel est un peu étrange et imprévisible. Il bascule vers la gauche, alors réécrivez-le:
fonction play () {// change l'image du carrousel pour basculer l'image vers le timiner droit = setInterval (function () {next.onclick ();}, 2000)} <! doctype html> <html> <ead> <meta charset = "utf-8"> <itle> </ title> <style type = "text / css"> * {margin: 0; 0; text-decoration: Aucun;} corps {padding: 20px;} # conteneur {width: 600px; hauteur: 400px; bordure: 3px solide # 333; overflow: Hidden; position: relative;} # list {width: 4200px; hight: 400px; position: absolu; z-index: 1;} # list iMg {width: 600px; z-index: 1; 400px; float: gauche;} # boutons {position: absolu; hauteur: 10px; largeur: 100px; z-index: 2; en bas: 20px; gauche: 250px;} # boutons span {curseur: pointeur; float: gauche; border-radius 1px #fff; largeur: 10px; hauteur: 10px; border-radius: 50%; batte: # 33; margin; 5px;} # boutons .On {Background: ORangered;}. Arrow {Cursor: Pointer; Affichage: Aucun; Line-Height: 39px; Text-Align: Center; Font-Size: 36px; Font-Weight: Bold; Width: 40px; Height: 40px; Position: Abslute; Z-index: 2; Top: 180px; bandlecolor: rgba (0, 0, 0, 0, Top: 180px; background-Color: Rgba (0, 0, 0, 0, Top: 180px; Background-Color: Rgba (0, 0, 0, 0, Top: 180px; Batteer 0, .3); couleur: #fff;}. Arrow: Hover {background-Color: rgba (0, 0, 0, .7);} # Container: hover .arrow {display: Block;} # PREV {Left: 20px;} # Next {Right: 20px;} </ style> <script type = "text / javascrip événement * // * temporaire * / window.onLoad = function () {var contener = document.getElementById ('Container'); var list = document.getElementById ('list'); var boutons = document.getElementById ('Buttons'). GetElementsByTagname ('Span'); varv = document.getElementyid ('prev'); var Next = Document. index = 1; var timer; fonction animate (offset) {// ce qui est obtenu est style.left, qui est la distance pour être par rapport à la gauche, donc après la première image, le style.left est tout négatif, // et le style. var newleft = parseInt (list.style.left) + offset; list.style.left = newleft + 'px'; // infinite de défilement jugement if (newleft> -600) {list.style.left = -3000 + 'px';} if (newleft <-3000) {list.style.left = -600 + '}}} fonction play () {// Timer d'exécution répétée = setInterval (function () {next.OnClick ();}, 2000)} fonction stop () {ClearInterval (timer);} Fonction ButtonsShow () {// Effacer le style du petit point précédent pour (var i = 0; i <Buttons.Length; i ++) {if (Buttons [i]. {boutons [i] .className = "";}} // Le tableau commence à partir de 0, donc index a besoin -1buttons [index - 1] .classname = "on";} prev.OnClick = function () {index - = 1; if (index <1) {index = 5} boutonsShow (); aniate (600);}; Parmi la minuterie ci-dessus, l'indice continuera d'augmenter. Nous n'avons que 5 petits points, nous devons donc faire un index de jugement + = 1; if (index> 5) {index = 1} animate (-600); ButtonsShow ();}; for (var i = 0; i <Buttons.Length; i ++) {Buttons [i] .onclick = function () {// optimiser, cliquez sur le point actuel dans l'image actuelle et ne vous exécute pas. if (this.classname == "on") {return;} / * Ici, nous obtenons la position où la souris se déplace vers le point, utilisez ce parseInt (this.getAttribute ('index')); var offset = 600 * (clickIndex - index); // cet index est indexanimate (décalage); index = clickIndex; // Stockage la position après la souris cliquez sur la souris et utilisez-la pour afficher le DOTSSHOW ();}} Container.OnMouseOver = Stop; Container.OnMouseout = "Play; Play ();} </cript> </ head> <body> <div Id =" Container "> <div Id =" List "Style =" Left: -600px; "> <img Src =" IMG / 5 src = "img / 1.jpg" /> <img src = "img / 2.jpg" /> <img src = "img / 3.jpg" /> <img src = "img / 4.jpg" /> <img src = "img / 5.jpg" /> <img src = "img / 5.jpg" /> <img " src = "img / 2.jpg" /> <img src = "img / 3.jpg" /> <img src = "img / 4.jpg" /> <img src = "img / 5.jpg" /> <img src = "img / 1.jpg" /> </ div> <div id = "Buttons"> <pannet index = "1"> </ spander index = "2"> </span> <span index = "3"> </ span> <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "javascript:;" id = "prev"> </a> <a href = "javascript:;" id = "next" >> </a> </div> </ body> </html>Ce qui précède est le simple code de carrousel JS présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!