1. Carusel flash
Independientemente de la descripción, la implementación es relativamente simple y el efecto es mejor
2. Carrusel deslizante
El siguiente código HTML es un ejemplo (deslizar a la izquierda)
<div style = "Overflow: Hidden; Width: 266px;"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div>
Código fuente del complemento: Realice la rotación izquierda y hacia arriba, la conmutación manual también se cambia y sube hacia arriba (conmutación manual del código fuente de clave)
var all = $ panel.find ('> li'), prevalos = new array (); prevalos [0] = all.eq (0); // Guarde todos los nodos delante del nodo de destino en Prevall, y después de que termina la animación, estos nodos se agregan a la parte posterior del contenedor uno por uno en orden para (var i = 1; i <len; i ++) {todos. 'ninguno'}); prevalos [i] = all.eq (i);} ... $ panel.animate ({'marginleft': -options.width+'px'}, options.duration, function () {for (var i = 0; i <previrall.length; i ++) {$ panel.append ($ (((i]). Mostrar nodo al último} $ panel.css ({marginleft: 0});})Hay dos formas principales de implementar carruseles deslizantes
1) Cambie el margen de margen del elemento principal y agregue continuamente el primer elemento secundario al final del contenedor principal
Implementación simple
var $ panel = $ ('ejemplo'); var scrolltimer = setInterval (function () {scrollNews ($ panel);}, 3000); function $ scrollNews () {$ panel.animate ({'marginleft': '-266px'}, 500, function () {$ panel.css ({marginleft: 0ft: 0 }). Find ('> li: primero'). AppendTo ($ panel);})}Un problema con este enfoque es que puede haber problemas de compatibilidad en los viejos IES.
2) Establezca el margen de margen del elemento principal en el método de acumulación
Sin embargo, cuando el margen-izquierda se ajusta al mínimo (deslice al último elemento), establezca la posición del primer elemento secundario en la parte posterior del último elemento secundario. Cuando el último elemento se desplaza al primer elemento, el margen de margen de elemento principal se establece en 0 y se devuelve la posición del primer elemento secundario. Dé un ejemplo de código simple
var $ panel = $ ('. Ejemplo'), index = 0; var scrolltimer = setInterval (function () {scrollNews ($ panel);}, 3000); function scrollNews () {if (++ index> = 2) {$ panel.css ({'paddingleft': 266+'px'}) $ panel.Find ('> li: li: csss (paddingleft. 'posición': 'absoluto', 'izquierda': 266*índice + '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: primero'). CSS ({'Position': 'Static', 'Left': 'Auto'});Los complementos de desplazamiento más complejos deben soportar el desplazamiento horizontal y vertical (cuatro direcciones), pueden cambiar manualmente el enfoque y puede subir y bajar. Adjunte el código fuente completo de complemento que escribí
Código fuente del complemento jQuery.nfdscroll.js: admite desplazamiento horizontal y vertical (cuatro direcciones). La conmutación manual se desplazará con la dirección de conmutación.
/** * @Author 'Chen Hua' * @Date '2016-5-10' * @Description Sliding Carousel Cle-in, admite un CAROUSEL SLINICIO HORIZONTAL y vertical CAROUSEL * * @Example html: <div> <!-Contenido de desplazamiento ul-> <ul> <li> <a href = "xxx" href = "xxx" target = "_ blank"> </a> </li> <li> <a href = "xxx" target = "_ blank"> </a> </li> <li> <a href = "xxx" target = "_ en blanco"> </a> </li> </ul> <! <li> </li> <li> </li> <li> </li> </ol> <!-anterior y Next, opcional-> <div> <a href = "javascript: void (0);"> </a> <a href = "javaScript: void (0);"> </a> </div> </iv> js: $ ('. startIndex: 0, ancho: '266', altura: '216', intervalo: 2000, seleccionado: 'círculo', previoxt: '', nextText: '', deriction: 'izquierda', devolución de llamada: function (index, $ currentNode) {console.log (index)}}); * @param startIndex {número} desplazamiento desde el número de elementos de desplazamiento de forma predeterminada, opcional (0-n, 0 significa que el primero, el valor predeterminado es 0) * @param ancho {número} ancho del elemento de desplazamiento, opcional (cuando el ancho es 0 significa que no se establece el ancho) * @param {número de desplazamiento} altura del elemento de desplazamiento, opcional (cuando la altura es 0 no se establece el ancho * Tiempo de intervalo, Unidad MilliseConds, cuando el valor es negativo, no se realiza desplazamiento automático * @param duración {número} duración de animación * @param seleccionado {string} desplazamiento de desplazamiento pequeño (lista de enfoque) clase actual * @param deriction {cadena} de desplazamiento, admitiendo la dirección izquierda/derecha y superior * @param llamada {function} llamado de call -throlling the sliding the sliding the sliding the sliding the sliding the sliding the sliding the sliding the sliding the sliding the sliding the the the the the the the the the sliding the the the the the the the the the the the the the theN, thepparming the theM theN Parámetros (índice, $ currentNode), índice: el índice del nodo que se muestra después del carrusel; 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 width, optional (when width is 0 means no width is set) height: 0,//Scrolling element height, optional (when height is 0 means no height is set) interval: 1000,//Interval time milliseconds duration: 400,//Animation duration selected:'selected',//Scroll switching small icon Current class prevText:'Previous', nextText:'Next', deriction:'left',//Scroll direction devolución de llamada: function (index, $ currentNode) {// dispara inmediatamente después de desplazarse a un nuevo nodo, CurrentNode es el objeto jQuery del nodo mostrado actualmente}}, $ this = this, $ panel = $ this.find ('> ul'), // Descripción de contenedor $ Panellist = $ panel.Find ('> li'), $ selectiMist = $ this.find ('' '', 'ola/////panel/panel/SELECH = jQuery.extend (defaultOpt, options), animatefn, // scroll animation max = $ panel.find ("> li"). Longitud, // El número de nodos que se someterán a scrolled focusIndex = 0, // El índice del nodo Node Node Node nfdscrolltimer = 0, // temporization inanimation = falso,/no otras animaciones se responden durante la era de la animación de la animación actualmente durante la animación de la animación actualmente. Hay cualquier índice de espera de espera no ejecutada; // el índice de destino de la animación de espera no ejecutada $ ('. no se ha completado, pero el enfoque se ha cambiado al siguiente lugar. toindex; // no se responden otras animaciones durante el proceso de animación} else {iswaiting = false; AnimateFn (ToIndex); Función de índice especificada LEFTRIGHTAnimate (ToIndex) {// Método de desplazamiento predeterminado if (ToIndex == Undefined) if (toIndex> = max) {// Cuando la última imagen continúa desplazando $ panel.css ({'paddingleft': options.width + 'px'}) $ panellist.eq (0) .css ({'posición': 'absoluto', 'izquierda': options.width*toindex + 'px'}); 0) {// Solo cuando la imagen actual es la primera imagen, haga clic en la imagen anterior // procesando cuando la actual es el último CAROUSEL $ PANELLIST.EQ (Max - 1) .CSS ({'Position': 'Absolute', 'Left': -options.Width + 'PX'}); $ selectList.filter ('.' + options.selected) .RemoVeclass (options.selected) .end (). eq (tind) .addclass (options.selected); max) {// $ panel.css ({'marginleft': 0, 'paddingleft': 0}); 'PX', 'Paddingleft': 0}); TopbottomaniMe (Toindex) {// Método de desplazamiento predeterminado if (toIndex == Undefined) {if (options.deriction == 'top') {toindex = focusindex + 1 > = max) {$ panel.css ({'paddingtop': options.height + 'px'}) $ panellist.eq (0) .css ({'position': 'absoluto', 'top': options.height*toindex + 'px'}); Imagen anterior // Procesamiento Cuando la actual es el último carrusel $ Panellist.eq (max - 1) .CSS ({'Position': 'Absolute', 'Top': -options.Height + 'PX'}); opciones.selected) .RemoVeclass (options.selected) .end (). eq (tind) .AddClass (options.selected); 0, 'Paddingtop': 0}); 'PaddingTop': 0}); $ this.on ('mouseover', function () {stopScroll ();}). on ('mouseout', function () {startsCroll ();}). on ('click', '.nfdscroll-prev', function () {stopScroll (); startsCroll (focusIndex-1);}). stopScroll (); 'Hidden'}); En el complemento. $ panel.find ('> li'). CSS (CSSO) .length; csso = {altura: options.height} $ this.css ({altura: options.height}); // Solo necesito la altura de la tubería if (options.width) {csso.width = options.width 'PX', 'Margintep': -options.Height*Focusindex + 'PX'}); inicioCroll}}});Un ejemplo completo
<! DOCTYPE HTML> <html> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Ejemplo de prueba de carrusel </title> <style type = "text/css"> cuerpo, ul, ol {margen: 0; Padding: 0;} ul, ol {list-style: none;} .li1 {background-color: #000;} .li2 {de fondo de fondo: #333;} .li3 {en segundo plano: #666;} .li4 {fondo de fondo: #999;} .example {margen-subft: 300px;} .exath. ROLDE-LEFUNT: 80px; Ancho: 186px; Altura: 20px; arriba: 186px; Izquierda: 0px; Antecedentes: #fff; cursor: puntero; } ol li {float: izquierda; Ancho: 10px; Altura: 10px; margen: 5px; Antecedentes: #ff0; Border-Radius: 10px; } ol li.circle {fondo: #f00; } </style></head><body> <div> <!-- Scroll content ul --> <ul> <li><a href="xxx" target="_blank"></a></li> <li><a href="xxx" target="_blank"></a></li> <li><a href="xxx" target="_blank"></a></li> <li> <a href = "xxx" target = "_ Blank"> </a> </li> </ul> <!-Lista de foco, opcional-> <ol> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ol> <!-anterior y siguiente, opcional-> <div> <a href = "javascript: void (0);"> </a> <a href = "javascript: void (0);"> </a> </div> </div> <script type = "text/javaScript" src = "común/jQuery.js"> </script> <script type = "text/javaScript" src="common/jquery.nfdscroll.js"></script> <script type="text/javascript"> $('.example').nfdscroll({ startIndex:0, width:'266', height:'216', interval:-1,//2000, selected:'circle', prevText:'Previous', nextText:'Next', deriction:'left', devolución de llamada: function (index, $ currentNode) {console.log (index)}}); </script> </body> </html>Efectos logrados
Ajuste manualmente los estilos de OL, nfdscroll-previo, etc. en él
El método de implementación simple del carrusel anterior es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.