1. Carrossel flash
Independentemente da descrição, a implementação é relativamente simples e o efeito é melhor
2. Carrossel deslizante
O código HTML a seguir é um exemplo (deslize para a esquerda)
<div Style = "Overflow: Hidden; largura: 266px;"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </liv>
Código fonte do plug -in: Realize a rotação esquerda e para cima, a troca manual também é deixada e para cima com troca (troca manual do código -fonte da chave)
var all = $ painel.find ('> li'), preall = new Array (); preall [0] = all.eq (0); // salve todos os nós na frente do nó de destino no pré -pavall e, após o término da animação, esses nós são adicionados à parte traseira do contêiner um por um para (var i = 1; i <Len; 'nenhum'}); preall [i] = all.eq (i);} ... $ painel.animate ({'marginLeft': -Options.width+'px'}, options.draturion, function () {para (var i = 0; i <preall.length; i ++) {$ pain.ApnEnd ($ (prevall [i]. Exibir nó para o último} $ painel.css ({marginleft: 0});})Existem duas maneiras principais de implementar carrosséis deslizantes
1) Alterne a margem do elemento pai e adicione continuamente o primeiro elemento filho ao final do contêiner pai
Implementação simples
var $ painel = $ ('Exemplo'); var scrolltimer = setInterval (function () {scrollNews ($ painel);}, 3000); função $ scrollNews () {$ painel.animate ({'marginleft': '-26px'}, 500, function () {$ Painel. }). Find ('> li: primeiro'). Appendto ($ painel);Um problema com essa abordagem é que pode haver problemas de compatibilidade nas antigas.
2) Defina a margem-esquerda do elemento pai no método de acumulação
No entanto, quando a margem-esquerda é definida como o mínimo (deslize para o último elemento), defina a posição do primeiro elemento filho na parte traseira do último elemento infantil. Quando o último elemento é rolado para o primeiro elemento, o elemento pai-elemento-esquerda é definido como 0 e a posição do primeiro elemento filho é retornada. Dê um exemplo de código simples
var $ painel = $ ('. Exemplo'), index = 0; var scrolltimer = setInterval (function () {scrollNews ($ painel);}, 3000); funclolnews () {if (++ index> = 2) {$ pain.css ({'Paddingleft': 266+'px'} 'Position': 'absoluto', 'esquerda': 266*index + 'px'}); } $ painel.animate ({'marginLeft': -266*index+'px'}, 500, function () {if (++ index> 3) {$ pain.css ({marginleft: 0}); se (index> = 3) {index = 0; $ pain.css (}); $ painel.find ('> li: primeiro').Os plug-ins de rolagem mais complexos precisam suportar a rolagem horizontal e vertical (quatro direções), podem alternar manualmente o foco e pode aumentar e descer. Anexe o código-fonte plug-in completo que escrevi
Código -fonte do plug -in jQuery.nfdscroll.js: suporta rolagem horizontal e vertical (quatro direções). A troca manual rolará com a direção de comutação.
/** * @author 'chen hua' * @date '2016-5-10' * @Description Plug-in de carrossel deslizante, suporta carrossel deslizante horizontal e vertical * * @example html: <div> <!-conteúdo ul-> <li> <li> <a href = "xxx" href = "xxx" Target = "_ Blank"> </a> </li> <li> <a href = "xxx" target = "_ blank"> </a> </li> <li> <a href = "xxx" alvo = "_"> </a> </li> </li> <! <li> </li> <li> </li> <li> </li> </ol> <!-anterior e próximo, opcional-> <div> <a href = "javascript: void (0);"> </a> <a href = "javascript: void (0); startIndex: 0, largura: '266', altura: '216', intervalo: 2000, selecionado: 'círculo', prevText: '', nextText: '', deriction: 'esquerda', retorno de chamada: function (index, $ currentNode) {console.log (index)}}); * @param startIndex {Number} Scrolling from the number of scrolling elements by default, optional (0-n,0 means the first one, default is 0) * @param width {Number} Scrolling element width, optional (when the width is 0 means no width is set) * @param height {Number} Scrolling element height, optional (when the height is 0 means no height is set) * @param interval {Número} Tempo de intervalo, unidade milissegundos, quando o valor é negativo, nenhuma rolagem automática é executada * @param duração {número} duração da animação * @param selecionado {string} rolling} RinCling Icon (Lista de foco) A classe atual * @Param @(string} Roll @Direction Ícone (Lista de foco)/listão de fundo * @param @ @{String} Scrolling Direction, suporta -se direita e direita e listagem e topo de primeira linha * @param @ @(string} rolagem @ Animação deslizante, parâmetros (índice, $ currentNode), índice: o índice do nó exibido após o carrossel; CurrentNode: O objeto jQuery do nó atualmente exibido após o carrossel * @param prevText {string} O texto do botão anterior, o padrão é "anterior" * @param nextText {string} o texto do botão StartIndInTEnTInTEnTInTInTInTInTInTEnTIndInTInTEnTInTEnTInTEnTInTInTIrPTHTHTHTHTHTIRT ({nfdsTroll: startExTroll: startIndInTInTr (nfdSTroll: StartIndInTInTr (nfdSTroll: StartIndInTr ({nfdSTroll. 0, // largura do elemento de rolagem, opcional (quando a largura é 0 significa que não há largura está definida) Altura: 0, // rolando altura do elemento, opcional (quando a altura é 0 significa que não há altura está definida) intervalo: 1000, // tempo de intervalo Millissegunds Duração: 400, // ANIMAÇÃO DURITE SELECTET: 'Selected', // Scruting Durning Duration Dicção: 'Esquerda', // Retorno de chamada de direção de role: function (índice, $ currentNode) {// dispara imediatamente após rolar para um novo nó, o currentNode é o objeto jQuery do nó atualmente exibido}}, $ this = this, $ painel = $ $ this.find ('> ol> li'), // Selecione Opções de contêiner = jQuery.extend (defaultOpt, opções), animatefn, // roll animação max = $ painel.find ("> li"). comprimento // o número de nós para serem rolados focuss = 0, // o índice do time atualmente no NNDS NNDS para ser rolado Animações são respondidas durante o processo de animação iswaiting = false, // existe algum índice de espera de espera não realizado; // o índice de destino da animação de espera não realizada $ ('. se ($ Panellist.Length <= 1) {return; StartCroll (ToIndex) {StopScroll (); ANIMANTEFN (ToIndex); ClearInterval (nfdsCrollTimer); } if (toIndex! = FocusIndex) {inanimation = true; 'Esquerda': options.width*toIndex + 'px'}); }); }, opções.duration, function () {FocusIndex = tind; 0) {// $ painel.css ({'marginleft': -Options.width*focusindex + 'px', 'Paddingleft': 0}); inanimation = false; FocusIndex) {inanimation = true; Tind = 0; // Foco primeiro para $ selectList.Filter ('.' + Option.Selected) .RemoveClass (Options.Selected) .nd (). Eq (tind) .addclass (options.lected); max) {$ painel.css ({margintop: 0, 'PaddingTop': 0}); -Options.Height*FocusIndEx + 'PX', 'PaddingTop': 0}); bindEvent () {// Evento de ligação $ this.on ('mouseOver', function () {stopScroll ();}). '.nfdscroll-next', function () {stopscroll (); $ this.css ({Position: 'relativo', estouro: 'hidden'}); 'Right') {// Inicializa o estilo, de fato, o estilo não deve ser feito no plug-in. } var comprimento = Painel.find ('> li'). CSS (CSSO) .Length; 'Bottom') {var CSSO = {Hight: Option.Height} $ this.css ({altura: options.Height}); // só preciso da altura do tubo se (opções.width) {csso.width = options.width; + ' startcroll}}});Um exemplo completo
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Exemplo de teste de carrossel </title> <style type = "text/css"> corpo, ol {margin: 0; Prendimento: 0;} ul, ol {estilo de lista: nenhum;} .li1 {Background-Color: #000;} .li2 {Background-Color: #333;} .li3 {Background-color: #666;} .li4 {Borden-color: #999;} .xemple {margin; preenchimento-esquerda: 80px; Largura: 186px; Altura: 20px; TOP: 186px; Esquerda: 0px; Antecedentes: #FFF; Cursor: Ponteiro; } ol li {float: esquerda; Largura: 10px; Altura: 10px; margem: 5px; Antecedentes: #ff0; Radio de fronteira: 10px; } ol Li.circle {Background: #f00; } </style> </ad Head> <body> <div> <!-rolar o conteúdo ul-> <ul> <li> <a href = "xxx" target = "_ blank"> </a> </li> <li> <a href = "xxx" alvo = "_"> </a> <li> <li> <a hre = "xxx" = "_"> </a> <li> <a href = "xxx" target = "_ blank"> </a> </li> </ul> <!-Lista de foco, opcional-> <ar> <li> </li> <li> </li> <li> </li> <li> </li> </li> </li> </li> <li> href = "javascript: void (0);"> </a> <a href = "javascript: void (0);"> </a> </div> </div> <script type = "text/javascript" src = "Common/jQuery.js"> </script> <script = "" text/javyring "/jvercring"/javercr/javercr/javercr/javyring "/javercr"/javercr/javercr/javercr/javeryr "/script/script" "" "" 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', Dicção: 'Esquerda', retorno de chamada: function (index, $ currentNode) {console.log (index)}}); </script> </body> </html>Efeitos alcançados
Ajuste manualmente os estilos de OL, nfdScroll-prev, etc.
O método de implementação simples do carrossel acima é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.