Eu mesmo escrevi três carrosséis de foto. Um é implementado em JS nativo simples e não tem efeitos de animação. O outro é implementado em combinação com o jQuery e é interrompido dentro e fora. Agora, quero fazer um mais legal no meu blog ou site pessoal, e posso exibir meus próprios trabalhos naquele momento. Depois de um tempo para fazer compras no MOOC, descobri que havia um curso de plug-in de carrossel, o que era um pouco legal, então pensei em encapsulá-lo no JS nativo. Somente depois de fazer isso, não foi tão fácil quanto eu pensava. . . Não vamos mais falar sobre isso, vamos explicar o processo de implementação.
2. Efeito
Porque meu servidor ainda não foi instalado. Não há demonstração on -line (Orz ...), então eu só posso colocar uma renderização.
O efeito aproximado ainda pode ser visto nas fotos, então não vou dizer muito. Se você quiser ver o efeito do código real, seja bem -vindo ao meu código de download do Github. Não se esqueça de me dar uma estrela no meu projeto GitHub^_^
Iii. Processo de implementação
Estrutura HTML
<div dados-setting = '{"Width": 1000, "Height": 400, "CarrosselWidth": 750, "CarrosselHeight": 400, "Scale": 0.9, "verticalalIng": "Middle"}'> <div> </div> <li> <li> <a href = "#"> <MI> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <a> <a href = "#"> <a href = "#"> <img src = "img/4.jpg"> </a> </li> <li>Essa estrutura é a mesma que a estrutura de código HTML dos carrosséis gerais. A pequena diferença é que existe uma propriedade de definição de dados na divisão principal do carrossel, que contém alguns parâmetros de efeitos do carrossel. O significado específico dos parâmetros será explicado posteriormente.
O código da parte CSS não será publicado. O mais importante é prestar atenção ao posicionamento absoluto dos elementos. Como pode ser visto nas renderizações, a posição e o tamanho de cada imagem são diferentes, portanto, são controlados através de JS, portanto, é necessário posicionamento absoluto. Vamos nos concentrar no processo de implementação do JS.
Processo de implementação do JS
Vamos falar sobre algumas etapas importantes no JS. Depois de fazer essas etapas, não deve haver dificuldades.
① Parâmetros do Default
Como é um plug-in de embalagem, definitivamente haverá alguns valores padrão para parâmetros que precisam ser configurados. Neste plugin, os seguintes parâmetros são principalmente:
Largura: 1000, // Largura da área de slides
Altura: 400, // A altura da área de deslizamento
CarrosselWidth: 700, // Largura do primeiro quadro do slide
CarrosselHeight: 400, // A altura do primeiro quadro do slide
Escala: 0.9, // Registre o relacionamento de escala, por exemplo, quanta largura e altura da segunda imagem são menores que a da primeira imagem quando exibidas.
AutoPlay: True, // é reproduzido automaticamente?
Timespan: 3000, // intervalo de tempo de reprodução automática
VerticalAlign: 'meio' // alinhamento da imagem, existem três maneiras: superior/médio/inferior, o padrão é o meio
②Encapsular o objeto
Como um site pode usar o mesmo plug-in de carrossel em vários lugares, a embalagem é fundamental. Depois de definir esse objeto, se você definir um método de inicialização para o objeto, poderá criar vários objetos. Você só precisa passar o mesmo DOM de todas as classes. Então, meu método de inicialização é o seguinte:
Carousel.init = função (carrossels) {var _This = this; // converte nodelist em matriz var cals = Toarray (Carrossels); <br> /*Como o nativo JS recebe todas as classes, o que você recebe é uma lista de nodelas, que é uma matriz de classe. Se você deseja usar um método de matriz, precisará convertê -lo em uma matriz real. Aqui Toarray é o método de conversão. */ Cals.ForEach (função (item, índice, array) {new _This (item);}); }Dessa forma, quando estou no window.onload, chamo de Carrossel.init (document.QuerySelectorAll ('. Carrossel-Main')); Dessa forma, posso criar vários carrosséis!
③inialize os parâmetros de posição do primeiro quadro
Como os parâmetros relevantes de todos os quadros após o primeiro quadro são definidos com referência ao primeiro quadro, é importante definir o primeiro quadro bem.
setValue: function () {this.Carrousel.style.width = this.settings.width+'px'; this.carrousel.style.Height = this.Settings.Height+'px'; /*Configurações do botão esquerda e esquerda, aqui, a área depois que os botões esquerdo e direito são subtraídos da largura do primeiro quadro. O Z-Index é maior do que todas as imagens, exceto o primeiro quadro, e as imagens são colocadas à esquerda e à direita, portanto o valor do índice z é metade do número de imagens. */ var btnw = (this.settings.width- this.settings.carrouselWidth)/ 2; this.prebtn.style.width = btnw+'px'; this.prebtn.style.Height = this.Settings.Height+'PX'; this.prebtn.style.zindex = math.ceil (this.carrouselitems.length/2); this.Nextbtn.style.width = btnw+'px'; this.nextbtn.style.Height = this.settings.Height+'PX'; this. // As primeiras configurações relacionadas ao quadro this.carrouselfir.style.left = btnw+'px'; this.CarRouseLfir.style.top = this.setCarRouseLalign (this.settings.carrouselHeight)+'px'; this.CarrouRSelfir.style.width = this.settings.carrosselwidth+'px'; this.CarrouRSelfir.Style.Height = this.settings.carrouselHeight+'px'; this.Carrouselfir.style.zindex = math.floor (this.Carrouselitems.length/2);},Aqui, quando o novo objeto for usado, vá para o nó DOM para obter os parâmetros de definição de dados e atualize a configuração de parâmetros padrão. Há um lugar para se notar aqui. Você não pode atualizar diretamente os parâmetros padrão atribuindo valores ao obter os parâmetros, porque quando os usuários configuram parâmetros, todos os parâmetros não podem ser configurados uma vez. Se o valor for atribuído diretamente e o usuário estiver configurado, os parâmetros serão perdidos. Aqui, escrevi um método de extensão de objeto semelhante ao método $ .Extend no jQuery para atualizar os parâmetros. Não vou listar os detalhes, se você estiver interessado, pode baixá -lo.
④O outro local de localização das configurações
A imagem aqui é realmente a imagem, exceto a primeira é dividida em duas imagens esquerda e direita, e a posição da imagem à esquerda e a à direita é diferente, por isso precisa ser configurada separadamente:
//Set the positional relationship of the picture on the right var rightIndex=level;rightSlice.forEach(function(item,index,array){ rightIndex--; var i=index; rw=rw*carrouselSelf.Settings.scale; //The picture on the right is gradually smaller according to the scale ratio rh=rh*carrouselSelf.Settings.scale; item.style.zIndex=rightIndex;//The value of Z-Index à direita é menor e o número de imagens pode ser gradualmente diminuído usando o número geral de imagens. O método de cálculo da lacuna aqui está: subtrair a largura do primeiro quadro, divida 2 e depois divida o número de figuras no item esquerdo ou direito.style.left = (constoffset+(++ Índice)*gap-rw)+'px'; // O valor da esquerda é realmente a esquerda do primeiro quadro+da largura do primeiro quadro+o espaçamento do liderança do lumin item.style.top = Carrouselself.setCarrouSelalign (rh)+'px';});O método de configuração à esquerda é semelhante e mais simples, para que não entre em detalhes.
⑤ Ajuste o tamanho da posição de todas as imagens durante a rotação
Esta etapa é muito importante. Clicar no próximo no botão direito é a rotação esquerda e clicar no botão anterior no botão esquerdo é a rotação direita. Nesse momento, precisamos considerar todas as imagens como um anel, clique uma vez, altere a posição e complete a rotação. Especificamente, quando a rotação esquerda é girada, faça com que os parâmetros da segunda figura sejam iguais à primeira foto, a terceira imagem igual à segunda foto ... e a última foto igual à primeira foto. Ao girar à direita, faça o parâmetro da primeira imagem igual à segunda figura, o parâmetro da segunda imagem igual à terceira imagem ... e o parâmetro da última imagem igual à primeira figura.
Vamos falar sobre rotação esquerda aqui
if (dir == 'esquerda') {ToArray (this.CarRouseLItems) .ForEach (function (item, índice, array) {var pre; if (index == 0) {// julgue se é o primeiro, precentwidthth; zIndex=pre.style.zIndex; var opa=pre.style.opacity; var top=pre.style.top; var left=pre.style.left; }else{ var width = tempWidth; var height = tempHeight; var zIndex = tempZIndex; var opa = tempOpacity; var top = tempTop; var left = tempLeft; } //Note here, because the second picture refere -se à primeira imagem e, quando alterar, a primeira imagem é alterada, portanto, os parâmetros relevantes da primeira imagem devem ser salvos temporariamente Item.Style.Left; function_this.rotateflag = true;A rotação aqui parecerá rígida se você não usar muito algumas animações. Mas o JS nativo não tem funções animadas, aqui escrevi uma função de animação imitada. O princípio é obter o valor de estilo original do DOM e compará -lo com o valor recém -passado. Use alguns métodos para definir uma velocidade. Minha velocidade aqui é dividir a diferença de 18. No entanto, defina um temporizador e consulte o intervalo de tempo no código -fonte jQuery para executar a cada 13 milissegundos. Em seguida, o temporizador fica claro toda vez que o valor do estilo original é adicionado ao valor recebido. Para detalhes, veja aqui.
Ok, os pontos -chave são quase os mesmos e deve ser fácil se você entender esses processos!
4. Resumo e reflexão
Resumir:
Pessoalmente, acho que este é um plugin relativamente fácil de entender. Seria bastante simples fazê -lo em combinação com o jQuery. No entanto, se você escrever do original, ainda se sentirá um pouco menos suave. Deve ser que as animações personalizadas não sejam tão boas quanto as animações encapsuladas pelo jQuery.
Além disso, como as imagens precisam ser divididas igualmente em ambos os lados dos lados esquerdo e direito, para números uniformes de imagens, o método usado aqui é clonar a primeira figura, depois adicioná -la ao final e formar um número ímpar.
pensar:
Se houver um bug, isso significa que eu defino um sinalizador de giro para determinar se ele pode girar no momento, que é impedir que você acompanhe o clique rápido. Quando pressionei, defino o RotateFlag como False e, em seguida, defina o RotateFlag como True após o término da animação, mas parece que o efeito não é óbvio. Espero que os mestres relevantes possam me dar alguns conselhos e todos progredirem juntos.
O acima é o conteúdo inteiro deste artigo. Para mais conteúdo, consulte: Resumo dos efeitos do carrossel de imagem JavaScript. Obrigado pela sua leitura.