1. Carrousel flash
Quelle que soit la description, l'implémentation est relativement simple et l'effet est meilleur
2. Carrousel coulissant
Le code HTML suivant est un exemple (glissement à gauche)
<div style = "Overflow: Hidden; largeur: 266px;"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div>
Code source du plugin: réalisez la rotation gauche et la hausse, la commutation manuelle est également laissée à la commutation (commutation manuelle du code source de clé)
var all = $ panneau.find ('> li'), prevall = new Array (); preval 'aucun'}); prevall [i] = all.eq (i);} ... $ PANNEL.Animate ({'marginleft': -options.width + 'px'}, options.Duration, function () {for (var i = 0; i <velfall.length; i ++) {$ Panel.APPEND ($ (Prévall [i]). Afficher le nœud au dernier} $ PANNEL.CSS ({marginleft: 0});})Il existe deux façons principales de mettre en œuvre des carrousels coulissants
1) Communiquez la marge du parent à gauche et ajoutez en continu le premier élément enfant à la fin du conteneur parent
Implémentation simple
var $ panneau = $ ('example'); var scrollTimer = setInterval (function () {scrollNews ($ panneau);}, 3000); function $ scrollNews () {$ panneau.animate ({'marginleft': '-266px'}, 500, function () {$ panneau.css ({marginleft: 0 }). trouver ('> li: premier'). APPENDTO ($ PANNEL);Un problème avec cette approche est qu'il peut y avoir des problèmes de compatibilité sur les anciens IES.
2) Définissez la marge d'élément parent-gauche dans la méthode d'accumulation
Cependant, lorsque la marge-gauche est définie au minimum (diapositive vers le dernier élément), définissez la position du premier élément enfant à l'arrière du dernier élément enfant. Lorsque le dernier élément est défilé vers le premier élément, la marge de marge du parent est réglée sur 0 et la position du premier élément enfant est renvoyée. Donner un exemple de code simple
var $ panneau = $ ('. Exemple'), index = 0; var scrollTimer = setInterval (function () {ScrollNews ($ PANNEL);}, 3000); fonction ScrollNews () {if (++ index> = 2) {$ Panel.css ({'Paddingleft': 266 + 'px'}) $ Panel.Find ('> li: première'). «position»: «absolue», «gauche»: 266 * index + «px»}); } $ PANNEL.Animate ({'marginleft': -266 * index + 'px'}, 500, function () {if (++ index> 3) {$ Panel.css ({marginleft: 0});} if (index> = 3) {index = 0; $ Panel.css ({marginleft: 0, 'daddingleft': 0}); $ PANNEL.FIND ('> Li: First'). CSS ({'position': 'statique', 'Left': 'Auto'});Les plug-ins de défilement plus complexes doivent prendre en charge le défilement horizontal et vertical (quatre directions), peuvent changer manuellement la mise au point et peuvent monter et descendre. Joindre le code source complet du plug-in que j'ai écrit
Code source du plugin jQuery.nfdscroll.js: prend en charge le défilement horizontal et vertical (quatre directions). La commutation manuelle fait défiler avec la direction de commutation.
/ ** * @author 'Chen hua' * @date '2016-5-10' * @description Sliding Carousel Plug-in, prend en charge le contenu glissant horizontal et vertical * * * @example html: <v> <! - Scroll Content ul -> <ul> <li> <a href = "xxx" Target = "_ Blank"> </a> href = "xxx" target = "_ blanc"> </a> </li> <li> <a href = "xxx" target = "_ blanc"> </a> </li> <li> <a href = "xxx" cible = "_ Blank"> </a> </li> </ul> <! <li> </li> <li> </li> <li> </li> </l> <! - Précédent et suivant, facultatif -> <div> <a href = "javascript: void (0);"> </a> <a href = "javascript: void (0);"> </a> </v> </v> js: $ ('. startIndex: 0, largeur: '266', hauteur: '216', Interval: 2000, sélectionné: 'Circle', prévut: '', nextText: '', Deriction: 'Left', callback: function (index, $ currentNode) {console.log (index)}}); * @param startIndex {nombre} défilement du nombre d'éléments de défilement par défaut, facultatif (0-n, 0 signifie le premier, par défaut est 0) * @param largeur {numéro} l'élément de défilement largeur, facultatif (lorsque la largeur est 0 signifie aucune largeur n'est définie) * @param height {numéro} l'élément de défilement de la hauteur, le numéro de la hauteur est 0 Temps d'intervalle, unité de millisecondes, lorsque la valeur est négative, aucune durée de défilement automatique n'est effectuée * @param durée {numéro} Durée d'animation * @param Selected {String} Scroll Toggle Small Icône (Liste de mise au point) Classe actuelle * @Param Deriction {String} Direction de défilement, soutenant la gauche / droite / en bas * @Param Rappel {Fonction} Callback Traigg Paramètres (index, $ currentNode), index: l'index du nœud affiché après le carrousel; CurrentNode: l'objet jQuery du nœud actuellement affiché après le carrousel * @param prévalton {String} Le texte du bouton précédent, la valeur par défaut est "précédente" * @param nextText {String} Le texte du bouton Suivant, par défaut est "Next" * / jQuery.fn.Extend ({nfdscroll: function (Options) {var defaultOpt = {startIndex: 0, width: 0, / Scolling) Largeur, facultative (lorsque la largeur est 0 signifie aucune largeur n'est définie) Hauteur: 0, // Hauteur de l'élément de défilement, facultatif (lorsque la hauteur est 0 signifie aucune hauteur n'est définie) Intervalle: 1000, // Time d'intervalle Millisecondes Durée: 400, // Durée d'animation Sélectionnée: "SEILT ', DIRICHIGNE" DIRICHE " fonction (index, $ currentNode) {// déclenchent immédiatement après le défilement vers un nouveau nœud, CurrentNode est l'objet jQuery du nœud actuellement affiché}}, $ this = this, $ PANNEL = $ this.find ('> ul'), // Scroll Container $ Panellist = $. jQuery.extend (defaultOpt, Options), animatefn, // Scroll Animation max = $ PANNEL.FIND ("> li"). Length, // Le nombre de nœuds à défiler FocusIndex = 0, // l'index du nœud actuellement affiché nfdscrolltimer = 0, // timiner inanimation = false, // not les autres animations ne sont-elles pas réagies au cours de l'animation ne sont pas des animations, c'est-à-dire que le processus d'animation n'est pas. Il y a un index d'attente d'attente sans exécution; // l'index cible de l'animation d'attente non exécutée $ ('. nfdscroll-prév'). terminé mais le focus a été basculé à la prochaine place. toIndex; return; // Aucune autre animation n'est répondu pendant le processus d'animation} else {Iswaiting = false; Animatefn (toindex); Fonction d'index spécifiée leftrightanimate (toIndex) {// Méthode de défilement par défaut if (toIndex == Undefined) {if (Options.Deriction == 'Left') {ToIndex = FocusIndex + 1; if (toindex> = max) {// Lorsque la dernière image continue de faire défiler $ PANNEL.CSS ({'Paddingleft': Options.Width + 'PX'}) $ Panellist.eq (0). 0) {// uniquement lorsque l'image actuelle est la première image, puis cliquez sur l'image précédente // Le traitement est le dernier carousel $ selectList.filter ('. Max) {// $ PANNEL.CSS ({'marginleft': 0, 'Paddingleft': 0}); $ Panellist.eq (0) .css ({'position': 'static', 'Left': 'Auto'}); 'PX', 'PADDINGLEFT': 0}); $ Panellist.eq (max - 1). TopBottomated (ToIndex) {// Méthode de défilement par défaut if (toIndex == Undefined) {if (Options.Deriction == 'TOP') {ToIndex = FocusdEx + 1; > = Max) {$ Pannel.css ({'PaddingTop': Options.Height + 'PX'}) $ Panellist.eq (0) .css ({'position': 'Absolute', 'top': Options.Height * Toindex + 'PX'}); // Traitement lorsque le courant est le dernier carrousel $ panellist.eq (max - 1). .end (). eq (tind) .addclass (options.Selected); $ panneau.animate ({'margintop': -options.height * toindex + 'px'}, options.Duration, fonction () {focusIndex = Tind; if (toindex> = max) {$ Panel.csss ({margintop: 0, 'paddingt': 0}); $ panellist.eq (0) .css ({'position': 'static', 'top': 'auto'});} else if (toindex <0) {// uniquement lorsque l'image actuelle est la première image puis sur l'image précédente $ PANNEL.CSS ({'margintop': -options.height * focusdex + 'px' ',' Paddingt ': 0}); $ panellist.eq (max - 1) .css ({position ': «statique», «top»: «auto»}); stopscroll ();}). sur ('mouseout', function () {startscroll ();}). sur ('click', '.nfdscroll-prév' 1. Position: 'relative'}) focusIndex = options.startIndex; // défiler de startIndex par défaut $ selectList.eq (focusIndex) .addclass (options.selected); // Switch focus if (options.deriction == 'Left' || Options.deriction == 'droite') {// Initialiser le style, en fait, le style ne doit pas être réalisé dans le plug-in. CSSO = {Width: Options.width, 'float': 'Left'} $ this.css ({width: options.width}); // uniquement la largeur du tube est nécessaire si (options.Height) {CSSO.HEight = Options.Height; options.width * Longueur + 'PX', 'marginleft': -options.width * focusIndex + 'px'}); Besoin de la hauteur du tuyau if (options.width) {csso.width = options.width;} var longueur = $ PANNEL.FIND ('> li'). CSS (CSSO) .Length; } else {alert ('plugin prend en charge le défilement dans quatre directions: gauche / droit / top / inférieur');Un exemple complet
<! Doctype html> <html> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <ititle> Exemple de test du carrousel </ title> <style type = "text / css"> body, ul, ol {margin: 0; Padding: 0;} ul, ol {list-style: Aucun;} .li1 {background-Color: # 000;} .li2 {background-Color: # 333;} .li3 {Background-Color: # 666;} .li4 {Background-Color: # 999;} .example {margin-left: 300px;}. absolu; padding-gauche: 80px; Largeur: 186px; hauteur: 20px; En haut: 186px; gauche: 0px; Contexte: #FFF; curseur: pointeur; } ol li {float: gauche; Largeur: 10px; hauteur: 10px; marge: 5px; Contexte: # FF0; Border-Radius: 10px; } ol li.Circle {background: # f00; } </ style> </ head> <body> <div> <! - Scroll Content ul -> <ul> <li> <a href = "xxx" cible = "_ Blank"> </a> </li> <li> <a href = "xxx" cible = "_ Blank"> </a> </li> <li> <a href = "xxx" Target = "_" <li> <a href = "xxx" cible = "_ blanc"> </a> </li> </ul> <! - Liste de mise au point, facultative -> <lo> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </li> <! - Précédent et suivant -> <v> <v> <a href = "JavaScript: void (0);"> </a> <a href = "javascript: void (0);"> </a> </div> </ div> <script type = "text / javascrip src = "Common / jQuery.nfdscroll.js"> </ script> <script type = "text / javascript"> $ ('. Exemple'). nfdscroll ({startIndex: 0, width: '266', hauteur: '216' ', Interval: -1, // 2000, Sélectionné:' Circle ', Précédent:' Précédent ', Next Text:' Next ', DIERIC function (index, $ currentNode) {console.log (index)}}); </cript> </ body> </html>Effets réalisés
Ajustez manuellement les styles d'OL, NFDSCROLL-PREV, etc.
La méthode de mise en œuvre simple du carrousel ci-dessus est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.