Não posso me interessar pelo CSS recentemente porque fiquei ressentido com os carrosséis de fotos e não aprendi bem, então levei algum tempo para me familiarizar com o JS. Então eu fui até a estrada negra e escrevi o efeito do carrossel e da imagem desaparecendo usando jQuery e js. O caminho para aprender no futuro é muito longo, espero ir mais longe e mais longe na estrada front-end `(∩_∩) ''
Em princípio, existem muitos tutoriais on -line, simplesmente colocados.
Desbotado, mas, de fato, apenas o efeito de desbotamento é usado aqui. Para cada imagem desbotada, definimos sua tela para bloquear e os outros são nenhum, então existe apenas uma imagem que realmente existe e ocupa uma posição no fluxo de documentos. Antes de definir o método de exibição da imagem, aumentar gradualmente a transparência da imagem dará às pessoas uma sensação de desbotamento.
De fato, há outro ponto -chave no código JS. Os fechamentos são usados no código, por isso tenho um pouco de compreensão dos fechamentos. Deixe -me dizer mais algumas palavras aqui:
A explicação oficial dos fechamentos é que um fechamento é uma expressão (geralmente uma função) que possui muitas variáveis e um ambiente ligado a essas variáveis; portanto, essas variáveis também fazem parte da expressão.
A maneira mais simples é:
Quando a função interna B da função A é referenciada por uma função externa variável A, um fechamento é criado.
Disse isso mais detalhadamente. O chamado "fechamento" é definir outra função como a função do método no corpo do construtor, e a função do método desse objeto, por sua vez, refere-se a variáveis temporárias no corpo da função externa. Isso permite que o valor variável temporário usado pelo corpo do construtor original seja mantido indiretamente, desde que o objeto de destino sempre possa manter seu método durante sua vida útil.
Embora a chamada inicial do construtor tenha terminado e os nomes das variáveis temporárias desapareceram, o valor da variável sempre pode ser referenciado no método do objeto de destino e o valor só pode ser acessado nesse método. Mesmo que o mesmo construtor seja chamado novamente, apenas novos objetos e métodos serão gerados. A nova variável temporária corresponde apenas ao novo valor e é independente da última chamada.
A função a seguir é uma função de fechamento. Por que usar o fechamento? Não é possível para funções comuns? Realmente não é possível. O objetivo do fechamento aqui é manter uma referência à bandeira. Se não houver fechamento, para variáveis locais, desde que a função seja executada uma vez, ou seja, o sinalizador será executado uma vez, a variável local será coletada e limpa pelo mecanismo de coleta de lixo. Nós nos referimos à variável de sinalizador através da função na chamada intermitente. Quando a segunda execução for executada, o sinalizador perderá seu valor e o corpo da função não pode executar o resultado correto. Quando comecei a tocar no front end, senti que o fechamento era opcional. O fato é que essa coisa é realmente importante!
var setVal = function (s, sinalizador) {return function () {pos = math.abs (parseint (pic.style [ponto])); if (sinalizador> 0) {// O ponto atual é maior que a coordenada do ponto de destino, a imagem se move para a direita, o valor esquerdo diminui o pic.style [ponto] = -math.floor (pos +(parseint (s*ssinglesize) - pos)*velocidade) +'px'; } if (sinalizador <0) {pic.style [ponto] = -math.ceil (pos +(parseint (s*ssinglesize) - pos)*speed) +'px'; } if (pos == (ssinglesize * s)) {agora = s; ClearInterval (intervalo); }}};Aqui está o código:
html
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> picsglide </ititle> <link href = "css/index.css" rel = "stylesscript" type = "text/css"> <script type = "text/javroScript" src = "js/jQuery-1.3.2.js"> </script> <script src = "js/index.js"> </script> </ad head> <corpo onload = "init ()"> <div id = "picbox"> <l class = "show_pic" style = "esquerdo: 0"> <li cláss = " src = "imgs/ccc.jpg"/> </a> </li> <li> <img src = "imgs/aaa.jpg"/> </li> <li> <img src = "imgs/bbb.jpg"/////> <li> <li> <img src = "imgs/ccc.jpg"/> </li> <li> <img src = "imgs/ccc.jpg"/> </li> </lis> <Div Class = "bg"> </div> <ul class = "Show_des"> <li> puss em boots em boots1 BOOTS3 </li> <li> Puss em boots4 </li> <li> Puss em boots5 </li> </ul> <ul class = "icon_num"> <li class = "on"> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> </li> </li> </li> <li>
CSS
corpo {tamanho da fonte: 12px; } ul, li {preenchimento: 0; margem: 0; estilo de lista: nenhum; } #picbox {width: 610px; Altura: 205px; margem: 50px automático; estouro: oculto; Posição: relativa; Fonte-tamanho: 0;}/*imagem do carrossel*/#picbox .show_pic {width: 3050px; Posição: Absolute;}#picbox .show_pic li {float: esquerda; Largura: 610px; Altura: 205px; Exibir: Nenhum; /*Display: Nenhum;*/}#picbox .show_pic li.on {display: block;}#picbox .show_pic li img {display: block; Largura: 610px; Altura: 205px;}#picbox .iCon_num {Posição: Absolute; Inferior: 12px; Direita: 10px; Z-Index: 10;}#picbox .iCon_num li {float: esquerda; /*Antecedentes: URL (/uploadfile/200912/28/fa15567738.gif) No -re -PEAT -15px 0; */ largura: 16px; Altura: 16px; Size da fonte: 16px; Cor: #39f; Alinhamento de texto: centro; Cursor: Ponteiro; Margem-direita: 5px;} #picbox .iCon_num li.on {background: #000; Opacidade: 0,5; }/*Background*/. BG {Z-Index: 1; Posição: Absoluto; Inferior: 0; Altura: 40px; Largura: 610px; Antecedentes: #000; Opacidade: 0,6; filtro: alfa (opacidade = 60);}#picbox .show_des {width: 300px; Altura: 18px; Posição: Absoluto; Inferior: 11px; Esquerda: 15px; Cor: #FFF; Z-Index: 10;}#picbox .show_des li {display: nenhum; altura de linha: 18px; Fonte-tamanho: 18px;}#picbox .show_des li.on {display: block;}JS
function cleanwhitaSpace (oElement) {for (var i = 0; i <oelement.childnodes.length; i ++) {var node = oeelement.childnodes [i]; if (node.nodeType == 3 &&! // s/.test (node.nodEvalue)) {node.parentnode.removeChild (node); }}} // código de carross this.layerglide = function (auto, obox, ssinglesize, segundo, fspeed, ponto) {var interval, timeout; // dois temporizadores var pos; // o valor absoluto da modelagem de coordenadas de posicionamento atual var time = segundo, agora = 0; // A imagem do tempo se move quando o intervalo de tempo, agora o valor do índice da imagem atual var velocidade = fspeed // velocidade de movimento var atrasado = segundo * 1000; // intervalo de tempo para cada comutação da imagem var picbox = document.getElementById (OBOX); Cleanwhitespace (PicBox); var pic = picbox.childnodes [0]; // Lista de fotos var des = picbox.childnodes [2] .getElementsByTagName ("li"); // Lista de fotos var con = picbox.childnodes [3] .getElementsByTagName ("li"); var sum = con.length; var setVal = function (s, sinalizador) {return function () {pos = math.abs (parseint (pic.style [ponto])); if (sinalizador> 0) {// O ponto atual é maior que a coordenada do ponto de destino, a imagem se move para a direita, o valor esquerdo diminui o pic.style [ponto] = -math.floor (pos +(parseint (s*ssinglesize) - pos)*velocidade) +'px'; } if (sinalizador <0) {pic.style [ponto] = -math.ceil (pos +(parseint (s*ssinglesize) - pos)*speed) +'px'; } if (pos == (ssinglesize * s)) {agora = s; ClearInterval (intervalo); }}}}; var changeto = function (num) {for (var i = 0; i <sum; i ++) {con [i] .className = ""; des [i] .className = ""; }; con [num] .className = "on"; DES [num] .className = "on"; var flag = math.abs (parseint (pic.style [ponto]))-ssinglesize * num; interval = setInterval (setVal (num, sinalizador), tempo); //bkg.hide (). Fadein (); } function AutoGlide () {ClearTimeout (interval); agora = (agora == (parseint (soma) -1))? 0: (agora + 1); Changeto (agora); timeout = setTimeout (autoglida, atraso); } função isauto () {if (auto) {timeout = setTimeout (autoglida, atraso); }; } isauto (); // Inicie o carrossel automático para (var i = 0; i <sum; i ++) // botão de navegação {con [i] .onMouseOver = (function (i) {return function () {cleartimeout (timeout); clearInterval (interval); changeto (i); this.onmouseout = isauto () e};}); this.layerfader = function (auto, obox, segundo, contagem, velocidade) {var interval, tempo limite; // dois temporizadores var agora = 0; // A imagem do tempo se move quando o intervalo de tempo, agora o valor do índice da imagem atual var atrasado = segundo * 1000; // O intervalo de tempo de cada imagem é comutado var picbox = document.getElementById (OBOX); Cleanwhitespace (PicBox); var pic = picbox.childnodes [0] .getElementsByTagName ("li"); var des = picbox.childnodes [2] .getElementsByTagName ("li"); var con = picbox.childnodes [3] .getElementsByTagName ("li"); var sum = con.length; function fadein (elem) {setopacity (elem, 0); // inicialmente totalmente transparente para (var i = 0; i <= count; i ++) {// alteração de transparência 20 * 5 = 100 (function (i) {var nível = i * 5; // Valor de mudança de transparência cada tempo settimeout (function () {setopacity (elem, nível)}, i * speed);}) (i); }} função setopacity (elem, nível) {// defina transparência if (elem.filters) {elem.style.filter = "alpha (opacity =" + nível + ")"; } else {elem.style.opacity = nível / 100; }} var changeto = function (num) {for (var i = 0; i <sum; i ++) {con [i] .className = ""; des [i] .className = ""; pic [i] .className = ""; }; fadein (pic [num]); con [num] .className = "on"; DES [num] .className = "on"; pic [num] .className = "on"; //bkg.hide (). Fadein (); } function AutoGlide () {ClearTimeout (interval); agora = (agora == (parseint (soma) -1))? 0: (agora + 1); Changeto (agora); timeout = setTimeout (autoglida, atraso); } função isauto () {if (auto) {timeout = setTimeout (autoglida, atraso); }; } isauto (); // Inicie o carrossel automático para (var i = 0; i <sum; i ++) // botão de navegação {con [i] .onMouseOver = (function (i) {return function () {clearTimeout (timeout); // clearInterval (interval); changeto (i); this.onMouseOut); isaUto ();O jQuery é muito mais simples que o JS, então não vou entrar em detalhes aqui. Quando eu estava no meu primeiro ano, fiz a aula de padrões de design. O professor nos disse para programar interfaces e não implementações. Tente não aparecer constantes no código para melhorar a reutilização do código. Portanto, ao escrever o código, todos os fatores variáveis são mencionados nos parâmetros. Última frase, para a operação de JS Dom, JS Nativo é o reino. Somente usando mais e praticando mais, você pode dominá -lo bem. Espero que você vá cada vez mais no futuro.
O exemplo simples acima de JS nativo implementando efeitos de carrossel e desbotamento de imagem é todo o conteúdo que eu compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.