Declaração: A demonstração depende de uma instituição de treinamento e é muito grata por essa estrutura de treinamento. Sem mais delongas, agora começaremos a mudar a produção da demonstração.
Antes de tudo, no processo de aprendizado front-end, as imagens de carrossel são algo que devemos aprender; portanto, para implementar com mais eficiência várias imagens de carrossel, uma estrutura de movimento é encapsulada.
function getStyle (obj, att) {if (obj.currentStyle) {return obj.currentStyle [att]; // para obter o valor do atributo em ie} else {return window.getCommAccomStyle (obj, null) [att);}} para obtenha o valor de atribuído w3 (brows); ClearInterval (obj.timer); obj.timer = setInterval (function () {var flag = true; var de corrente = 0; para (var att em json) {if (att == 'opacity') {current = parseInt (getStyle (obj, att)*100);} else {current = parseInt (getStyle (obj, att); Math.Ceil (Etapa): Math.floor (Etapa); Etapa) + ')'; ClearInterval (obj.timer);Essa estrutura é compatível com diferentes navegadores e permite que propriedades como opacidade e índice z sejam transmitidas. É claro que propriedades comuns como largura, altura, esquerda, direita são essenciais. Com essa estrutura, você pode obter ótimos resultados. Então agora começamos a fazer a demonstração formalmente.
Primeiro, a produção de index.html.
<div id = "box"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </liv>
A produção de index.html é muito simples. Vamos inserir a imagem como a imagem de fundo de Li em JavaScript. Depois disso, ajustamos o estilo CSS.
*{margem: 0px; preenchimento: 0px; } #Box {Width: 1300px; Altura: 400px; margem: 100px automático; estouro: oculto; } #Box UL {Hight: 400px; Largura: 1300px; } #box ul li {width: 240px; Altura: 400px; flutuar: esquerda; estouro: oculto; }O código para JavaScript é o seguinte:
window.onload = function () {var box = document.getElementById ('box'); var ali = box.Children [0] .Children; para (var i = 0; i <ali.length; i ++) {ali [i] .style.backgroundImage = 'url (' + 'imagens/' + (i + 1) + '.jpg'; ali [i] .onmouseOver = function () {para (var i = 0; i <ali.l.l]. Animado (this, {largura: 800});Dessa forma, a demonstração do efeito Bellows implementada usando o JS nativo é realizada. Obviamente, a estrutura animada encapsulada também pode ser usada para obter efeitos de carrossel semelhantes à rede.
O artigo acima é uma demonstração no estilo Bellows que implementa uma estrutura esportiva (código de exemplo) e encapsula uma estrutura esportiva (código de exemplo) que é 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.