1. Flash Carousel
Unabhängig von der Beschreibung ist die Implementierung relativ einfach und der Effekt ist besser
2. Karussell schieben
Der folgende HTML -Code ist ein Beispiel (links wischen)
<div style = "Überlauf: versteckt; Breite: 266px;"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div>
Plugin -Quellcode: Links- und Up -Drehung realisieren. Manuelles Schalter ist ebenfalls links und nach oben (manuelles Schalter des Schlüsselquellencodes).
var alle = $ panel.find ('> li'), prevall = new array (); prevall [0] = all.eq (0); // Alle Knoten vor dem Zielknoten in die Vorreiter speichern, und nach dem Ende der Animation werden diese Knoten nach einem Container nach eins nach eins (var i = 1; i <len; i ++) {i ++) {{{++) {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{++) hinzugefügt. 'keine'}); prevall [i] = all.eq (i);} ... $ panel.Animate ({'marginleft': -options.width+'px'}, options.duration, function () {für (var i = 0; i <prevall.Length; i ++) {$ panel.append ($) ($ preall [i]. Zeigen Sie den Knoten auf das letzte} $ panel.css ({marginleft: 0});})Es gibt zwei Hauptmethoden, um Schieberkarusselle implementieren zu können
1) Schalten Sie das übergeordnete Element-Rand-Links und fügen Sie das erste untergeordnete Element kontinuierlich zum Ende des übergeordneten Containers hinzu
Einfache Implementierung
var $ panel = $ ('Beispiel'); var scrolltimer = setInterval (function () {scrollNews ($ panel);}, 3000); Funktion $ scrollnews () {$ panel.Animate ({'marginleft': '-266px'}, 500, Funktion () {$ panel.cs ({{{$ panel.cs ({$ panal }). Find ('> li: First'). AppendTo ($ Panel);Ein Problem bei diesem Ansatz ist, dass es möglicherweise Kompatibilitätsprobleme bei alten IES gibt.
2) Stellen Sie das übergeordnete Element-Rand-Links in die Akkumulationsmethode ein
Wenn jedoch Rand-Links auf das Minimum eingestellt ist (Schieben zum letzten Element), setzen Sie die Position des ersten untergeordneten Elements auf der Rückseite des letzten untergeordneten Elements. Wenn das letzte Element zum ersten Element gescrollt wird, wird das übergeordnete Element-Margen-Links auf 0 gesetzt und die Position des ersten untergeordneten Elements zurückgegeben. Geben Sie ein einfaches Code -Beispiel an
var $ panel = $ ('. Beispiel'), Index = 0; var scrollTimer = setInterval (function () {scrollNews ($ panel);}, 3000); Funktion scrollNews () {if (++ index> = 2) {$ panel.css ({'padding'. 'Position': 'Absolute', 'links': 266*index + 'px'}); } $panel.animate({ 'marginLeft': -266*index + 'px' }, 500, function() { if(++index > 3){ $panel.css({ marginLeft: 0 }); } if(index >= 3){ index = 0; $panel.css({ marginLeft: 0, 'paddingLeft': 0 }); $ panel.find ('> li: First'). CSS ({'Position': 'static', 'links': 'auto'});Komplexere Scroll-Plug-Ins müssen horizontal und vertikaler Bildlauf (vier Richtungen) unterstützen, den Fokus manuell wechseln und auf und ab gehen. Fügen Sie den kompletten Plug-in-Quellcode hinzu, den ich geschrieben habe
Plugin -Quellcode jQuery.nfdscroll.js: Unterstützt horizontale und vertikale Scrollen (vier Richtungen). Durch das manuelle Schalter scrollt mit der Schaltrichtung.
/** * @Author 'Chen Hua' * @date '2016-5-10' * @Description Sliding Carousel Plug-In, unterstützt horizontale und vertikale Schiebekarousel * * @example html: <div> <!-Scroll-Inhalt ul-> <li> <a href = "a. href = "xxx" target = "_ leer"> </a> </li> <li> <a href = "xxx" target = "_ leer"> </a> </li> <li> <a href = "xxx" target = "_ leer"> </li> </li> </ul> <! <li> </li> <li> </li> <li> </li> </ol> <!-vorher und als nächstes optional-> <div> <a href = "javaScript: void (0);"> </a> <a href = "javascript: void (0); startIndex: 0, width: '266', Höhe: '216', Intervall: 2000, ausgewählt: 'Circle', PrevText: '', NextText: '', Deriction: 'links', callback: function (Index, $ currentNode) {console.log (index)}}}); * @param startIndex {number} scrollen aus der Anzahl der Scrolling-Elemente standardmäßig, optional (0-n, 0 bedeutet die erste, Standard ist 0) * @param breit {numme} scrolling-Element-Breite, optional (wenn die Breite 0 ist, bedeutet keine Breite. {Nummer} Intervallzeit, Einheit Millisekunden, wenn der Wert negativ ist, wird kein automatisches Scrollen ausgeführt. Schiebebeanimation, Parameter (Index, $ currentNode), Index: Der Index des Knotens, der nach dem Karussell angezeigt wird; currentNode: the jquery object of the node currently displayed after the carousel* @param prevText {String} The text of the previous button, default is "previous" * @param nextText {String} The text of the next button, default is "next" */ jQuery.fn.extend({nfdscroll: function(options) { var defaultOpt = { startIndex: 0, width: 0, // Scrolling -Element -Breite, optional (wenn Breite 0 ist, bedeutet keine Breite) Höhe: 0, // Scrolling -Elementhöhe, optional (wenn die Höhe 0 ist, ist keine Höhe festgelegt) Intervall: 1000, // Intervallzeit Millisekondauer Dauer: 400, // Animationsdauer Selected: 'ausgewählt. Dieicion: 'links', // scroll Direction Rückruf: Funktion (Index, $ currentNode) {// Auslöser unmittelbar nach dem Scrollen zu einem neuen Knoten, CurrentNode ist das jQuery -Objekt des aktuell angezeigten Knotens}}, $ this this, $ panel = $ this $ this.find ('> ol> li'), // Containeroptionen auswählen = jQuery.extend (defaultopt, option), animimfn, // scroll Animation max = $ panel.find ("> li"). Länge, // Die Anzahl der Knoten, die Scrolled FocusIndex = 0, // Index des aktuell angezeigten aktuell angezeigten Node nfdscrolltimer = 0,, // Die derzeit angezeigten Nodik nfdscrolltimer = 0,, // Die derzeit angezeigte Note nfds nfdescrolltimer = 0, //, der derzeit angezeigten, nodiert nodntimer = 0, // /// // //// Animationen werden während des Animationsprozesses iswaiting = false geantwortet, // gibt es eine unerkannte Animation, die den Index des Ziels des Ziels der unerkämpften Animation $ ('. NFDSCROLL-PREV'). if ($ panellist.length <= 1) {return; stopscroll (); }, Optionen.Interval); ClearInterval (NFDSCrollTimer); }} if (toIndex! = FocusIndex) {Inanimation = true; 'Absolute', 'links': options.width*toIndex + 'px'}); 'px'}); 'px'}, option.duration, function () {focusIndex = tind; 0) {// $ panel.css ({'marginleft': -options.width*focusIndex + 'px', 'paddingleft': 0}); Inanimation = false; FocusIndex) {Inanimation = true; Tind = 0; // Switch Focus auf $ selectList.filter ('.' + Options.Selected) .removeclass (options.Selected) .end (). EQ (Tind) .AddClass (Optionen.Selected); max) {$ panel.css ({margintop: 0, 'paddingTop': 0}); -Options.Height*FocusIndex + 'PX', 'Padding': 0}) BindEvent () {// Bindungsereignis $ this.on ('mouseover', function () {stopscroll ();}). on ('mouseout', function () {startCroll ();}). on ('click', '.nfdscroll -Prev', function () {) klick (); '.nfdsCroll-Next', function () {stopscroll (); $ this.css ({Position: 'Relative', Überlauf: 'Hidden'}); 'Right') {// Initialisieren Sie den Stil, der Stil sollte nicht im Plug-In hergestellt werden. var länge = $ panel.find ('> li'). CSS (CSSO) .Length; 'unten') {var cSSO = {Höhe: option.height} $ this.css + 'px', 'margintop': -Options startCroll}}});Ein vollständiges Beispiel
<! DocType html> <html> <kopf> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <title> carousel test Beispiel </title> <style type = "text/css"> body, ul, ol {margin: 0; Padding: 0;} ul, ol {Listenstil: Keine;} .li1 {Hintergrundfarbe: #000;} .li2 {Hintergrundfarbe: #333;} .li3 {Hintergrundfarbe: #666;} .li4 {Hintergrundfarbe: #999; Padding-Links: 80px; Breite: 186px; Höhe: 20px; Top: 186px; links: 0px; Hintergrund: #fff; Cursor: Zeiger; } ol li {float: links; Breite: 10px; Höhe: 10px; Rand: 5px; Hintergrund: #ff0; Border-Radius: 10px; } ol li.circle {Hintergrund: #f00; } </style> </head> <body> <div> <!-scroll content ul-> <ul> <li> <a href = "xxx" target = "_ leer"> </a> </li> <li> <a href = "xxx" target = "_ bloße"> </a> <li> <li> <li> <li> <a href = "xxx" targ " <li><a href="xxx" target="_blank"></a></li> </ul> <!-- Focus list, optional --> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> <!-- Previous and next, optional --> <div> <a href = "javaScript: void (0);"> </a> <a href = "javascript: void (0);"> </a> </div> </div> <script type = "text/javascript" src = "Common/jQuery.nfdscroll.js"> </script> <script type = "text/javaScript"> $ ('. Beispiel'). Rückruf: Funktion (Index, $ currentNode) {console.log (index)}}); </script> </body> </html>Effekte erreicht
Passen Sie die Stile von OL, NFDSCroll-Prev usw. manuell an usw.
Die einfache Implementierungsmethode des obigen Karussells ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.